Written by java-style
on 2021-10-21

[Javascript] 테이블에 행 추가/삭제 구현하기 - insertRow, addRow...

자바/스프링 기반 디지털 융합 웹 개발자 양성과정

i nsertRow() , deleteRow()

함수 내용 insertRow()

addRow()

insertCell 테이블에 행 추가하기 deleteRow() 테이블에 행 삭제하기

예제

dynamicMultiForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> dynamicMultiForm 페이지 var count = 1; // 전역변수 function addRow() { var dynamicTable = document.getElementById('dynamic_table'); var newRow = dynamicTable.insertRow(); var cell1 = newRow.insertCell(); var cell2 = newRow.insertCell(); cell1.innerHTML = ''; cell2.innerHTML = ''; count++; } function checkSize(input) { if (input.files && input.files[0].size > (20*1024*1024)) { alert("파일 사이즈가 20MB 초과되었습니다."); } } function deleteRow() { var table = document.getElementById('dynamic_table'); var checkboxArray = document.getElementsByName('checkboxObj'); for (var i = checkboxArray.length-1; i>=0; i--) { var check = checkboxArray[i].checked; if (check) { table.deleteRow(i); } } } 동적 다중 파일 업로드 구현하기 작성자 제 목 Check 업로드할 파일 이름 업로드할 파일은 최대 20MB까지 업로드 가능

# 자바스크립트에서 HTML문서의 객체를 가져올 때 사용되는 함수들

함수 내용 getElementById() 문서 객체 중 id값을 가져오는 함수 getElementByName() 문서 객체 중 Name값을 가져오는 함수

# enctype="multipart"

- 모든 문자를 인코딩하지 않음을 명시함. 이 방식은 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용함

resister.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.oreilly.servlet.MultipartRequest, com.oreilly.servlet.multipart.DefaultFileRenamePolicy, java.util.*, java.io.*" %> <% request.setCharacterEncoding("UTF-8");%> <% String savePath = "C:/FileUpload/filestorage"; String encType = "UTF-8"; int maxSize = 20*1024*1024; try{ MultipartRequest multi = null; multi = new MultipartRequest(request,savePath,maxSize,encType, new DefaultFileRenamePolicy()); String name = multi.getParameter("name"); String subject = multi.getParameter("subject"); out.println("작성자 : "+name+""); out.println("제목 : "+subject+""); out.println(""); Enumeration files = multi.getFileNames(); while(files.hasMoreElements()){ String fname = (String)files.nextElement(); String filename = multi.getFilesystemName(fname); out.println("업로드된 파일 이름 : " + filename + ""); } }catch(Exception e){ System.out.println(e); } %> register 페이지

구현 화면

from http://qh5944.tistory.com/191 by ccl(A) rewrite - 2021-10-21 14:01:16

Top