JQuery 동적테이블 생성후 선택한 엘리먼트의 값 추출

	그룹명	이름	직위	회사명	회사전화	휴대폰	이메일

Checkbox JQuery

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

var index = 1;

var options

window.onload = function() {

var str = 'a@saerom.co.kr;b@saerom.co.kr;c@saerom.co.kr;;d@saerom.co.kr;e@saerom.co.kr;f@saerom.co.kr;g@saerom.co.kr;h@saerom.co.kr;';

var str2 = '미분류,0000;가족,0001;회사,0002;거래처,0003;';

var adress = str.split(';');

options = str2.split(';');

var rowVal;

for (i = 0; i < adress.length; i++) {

if (adress[i] != "") {

createAddRow(adress[i])

}

}

$("#btn").click(

function() {

var resultArr = new Array();

var list = $("input[type=checkbox]");

for ( var i = 0; i < list.length; i++) {

if (list[i].checked && i != 0) { //체크 된것과 인덱스 0이 아닌것 배열에 넣음

var groupTmp = $("#check" + i).parent().parent()

.find("#group").val()

var nameTmp = $("#check" + i).parent().parent()

.find("#name").val()

var jobTitleTmp = $("#check" + i).parent().parent()

.find("#jobTitle").val()

var companyTmp = $("#check" + i).parent().parent()

.find("#company").val()

var cNumberTmp = $("#check" + i).parent().parent()

.find("#cNumber").val()

var phoneTmp = $("#check" + i).parent().parent()

.find("#phone").val()

var emailTmp = $("#check" + i).parent().parent()

.find("#email").val()

if (nameTmp == "") {

alert(i + "번째 열의 이름이 누락되었습니다.");

rowVal = "";

return;

}

if (emailTmp == "") {

alert(i + "번째 열의 이메일이 누락되었습니다.");

rowVal = "";

return;

}

rowVal = groupTmp + ";" + nameTmp + ";"

+ jobTitleTmp + ";" + companyTmp + ";"

+ cNumberTmp + ";" + phoneTmp + ";"

+ emailTmp + ";"

resultArr.push(rowVal);

}

}

var tmp = '';

for ( var i in resultArr) {

tmp += resultArr[i] + '<br />';

}

$('#dibugConsole').html(tmp);

});

$(".txt").keypress(function(event) {

//alert(event.keyCode)

if(event.keyCode==44 || event.keyCode==59|| event.keyCode==39|| event.keyCode==34|| event.keyCode==33|| event.keyCode==126|| event.keyCode==96|| event.keyCode==60|| event.keyCode==62|| event.keyCode==46|| event.keyCode==58|| event.keyCode==35) {

alert("입력할수 없는 특수문자입니다.")

return false;

}

});

};

function AllCheck() {

if ($("#ALL").val() == "on") {

$('input[type=checkbox]').prop('checked', true);

$("#ALL").val("off")

} else {

$('input[type=checkbox]').prop('checked', false);

//$("#ALL").val("on")

}

}

function setOptions(group, op) {

//alert(op.text)

group.appendChild(op);

}

function addOption(group) {

var op = new Array();

for ( var i = 0; i < options.length; i++) {

//alert(options[i].substring(0,options[i].indexOf(",")));

op[i] = document.createElement("option");

op[i].text = options[i].substring(0, options[i].indexOf(","));

op[i].value = options[i].substring(options[i].indexOf(",") + 1);

;

if (op[i].value != "") {

setOptions(group, op[i])

}

}

}

function createAddRow(address) {

//1. 필요한 element or textNode 생성

var check = document.createElement("input");

check.setAttribute("type", "checkbox");

check.value = "";

                check.setAttribute("class", "check");

check.id = "check" + index;

index++;

var group = document.createElement("select");

group.setAttribute("class", "selcet group");

group.id = "group"

var op = document.createElement("option");

addOption(group);

var name = document.createElement("input");

name.setAttribute("type", "text");

name.setAttribute("class", "txt name");

name.value = "사용자";

name.id = "name";

var jobTitle = document.createElement("input");

jobTitle.setAttribute("type", "text");

jobTitle.setAttribute("class", "txt jobTitle");

jobTitle.value = "사장";

jobTitle.id = "jobTitle";

var company = document.createElement("input");

company.setAttribute("type", "text");

company.setAttribute("class", "txt company");

company.value = "새롬정보시스템";

company.id = "company";

var cNumber = document.createElement("input");

cNumber.setAttribute("type", "text");

cNumber.setAttribute("class", "txt cNumber ");

cNumber.value = "02)888-8888";

cNumber.id = "cNumber";

var phone = document.createElement("input");

phone.setAttribute("type", "text");

phone.setAttribute("class", "txt phone");

phone.value = "010-888-8888";

phone.id = "phone";

var email = document.createElement("input");

email.setAttribute("type", "text");

email.setAttribute("class", "txt email ");

email.value = address;

email.id = "email";

//2. table 객체를 찾기

var taList = document.getElementById("tableList");

//3. 찾은 table객체에 행을 추가

//alert("현재 행 길이 : taList.rows.length : " + taList.rows.length);

var row = taList.insertRow(taList.rows.length);

//4. 생성된 행에 열을 추가

var td1 = row.insertCell(0);

var td2 = row.insertCell(1);

var td3 = row.insertCell(2);

var td4 = row.insertCell(3);

var td5 = row.insertCell(4);

var td6 = row.insertCell(5);

var td7 = row.insertCell(6);

var td8 = row.insertCell(7);

//5. 각 열에 element나 textNode를 추가한다.

td1.appendChild(check);

td2.appendChild(group);

td3.appendChild(name);

td4.appendChild(jobTitle);

td5.appendChild(company);

td6.appendChild(cNumber);

td7.appendChild(phone);

td8.appendChild(email);

}

</script>

<style>

.check{}

.group{}

.name{width:40px;}

.jobTitle{width:33px;}

.company{width:90px;}

.cNumber{width:70px;}

.phone{width:70px;}

.email{width:100px;}

</style>

</head> <body> <form name="f"> <input id="btn" type="button" value="선택" /><br /> <table id="tableList"> <tr bgcolor="pink"> <th><input type="checkbox" id="ALL" name="ALL" onclick="AllCheck()" value="on"></th> <th>그룹명</th> <th>이름</th> <th>직위</th> <th>회사명</th> <th>회사전화</th> <th>휴대폰</th> <th>이메일</th> </tr> </table> <div id="dibugConsole"></div> </form> </body> </html>