HTML代碼：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="app.js"></script>
</head>
<body id="body" οnlοad="start()">
<div id="viewDiv" align="center"></div>
<table id="table2" border="1" width="60%" align="center">
<tr>
<input type="button" id="adds" οnclick="addTable()" value="添加" />|
<input type="button" id="delete" οnclick="deleteTable()" value="刪除" />|
<input type="submit" id="submit" οnclick="submitTable()" value="提交" />
</tr>
<tr id="untr">
<td width="5%"> </td>
<td width="25%">姓名</td>
<td width="25%">性別</td>
<td width="45%">描述</td>
</tr>
</table>
<table id="table3" border="1" width="60%" align="center">
</table>
</body>
</html>
js代碼：
var rowTRNum = 0;
var myArray=[];
//保存tr集合
var contentList=[];
function start(){
if(myArray.length!=0){
var viewDiv = document.getElementById("viewDiv");
var HTMLText="";
for(var i=0;i<myArray.length;i++){
HTMLText+="姓名："+myArray[i].name+"<br/>"+"性別："+myArray[i].sex+"<br/>"+"描述："+myArray[i].desc+"<br/><hr/>";
}
viewDiv.innerHTML=HTMLText;
}
}
//添加方法
function addTable(){
//獲取table對象
var mytable3=document.getElementById("table3");
//創建TR
var rowTR=mytable3.insertRow(-1);
rowTR.id="tr"+rowTRNum;
//創建第一個TD
var cellTD = rowTR.insertCell(-1);
cellTD.width="5%";
cellTD.id="tr"+rowTRNum+"_td1";
var checkedTD = document.createElement("input");
checkedTD.type="checkbox";
checkedTD.name="box";
checkedTD.id="checked"+rowTRNum;
cellTD.appendChild(checkedTD);
//創建第二個TD
cellTD = rowTR.insertCell(-1);
cellTD.width="25%";
cellTD.id="tr"+rowTRNum+"_td2";
var textTD = document.createElement("input");
textTD.type="text";
textTD.name="name";
textTD.id="text"+rowTRNum;
cellTD.appendChild(textTD);
//創建第三個TD
cellTD = rowTR.insertCell(-1);
cellTD.width="25%";
cellTD.id="tr"+rowTRNum+"_td3";
var label = document.createElement("label");
label.innerText="男";
label.htmlFor=rowTRNum;
label.id="labelman"+rowTRNum;
var radio = document.createElement("input");
radio.name=rowTRNum;
radio.type="radio";
radio.checked="checked";
radio.value="男";
radio.id="radioman"+rowTRNum;
cellTD.appendChild(radio);
cellTD.appendChild(label);
label = document.createElement("label");
label.innerText="女";
label.htmlFor=rowTRNum;
label.id="labelwoman"+rowTRNum;
radio = document.createElement("input");
radio.name=rowTRNum;
radio.type="radio";
radio.value="女";
radio.id="radiowoman"+rowTRNum;
cellTD.appendChild(radio);
cellTD.appendChild(label);
//創建第四個TD
cellTD = rowTR.insertCell(-1);
cellTD.width="45%";
cellTD.id="tr"+rowTRNum+"_td4";
var textareaTD = document.createElement("textarea");
textareaTD.id="textarea"+rowTRNum;
cellTD.appendChild(textareaTD);
rowTRNum++;
}
//刪除方法
function deleteTable(){
var str=document.getElementsByName("box");
var mytable=document.getElementById("table3");
for(var i=0;i<str.length;i++){
if(str[i].checked){
mytable.deleteRow(i);
}
}
}
//創建對象
function createObject(name, sex, desc){
var object = new Object();
object.name = name;
object.sex = sex;
object.desc=desc;
return object;
}
//提交按鈕
function submitTable(){
var mytable=document.getElementById("table2");
//table2的總行數
var rows = mytable.rows.length;
//獲取選中的複選框
var str=document.getElementsByName("box");
myArray=[];
//循環判斷選中的複選框
for(var i=0;i<str.length;i++){
if(str[i].checked){
alert(1);
//存儲radio的內容
var radiovalue="";
var textvalue=document.getElementById("text"+i).value;
var radioman=document.getElementById("radioman"+i);
var radiowoman=document.getElementById("radiowoman"+i);
var radioname=document.getElementsByName(i);
for(var j=0;j<radioname.length;j++){
if(radioname[j].checked){
radiovalue=radioname[j].value;
break;
}
}
var textareavalue=document.getElementById("textarea"+i).value;
myArray.push(createObject(textvalue,radiovalue,textareavalue));
}
}
start();
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="app.js"></script>
</head>
<body id="body" οnlοad="start()">
<div id="viewDiv" align="center"></div>
<table id="table2" border="1" width="60%" align="center">
<tr>
<input type="button" id="adds" οnclick="addTable()" value="添加" />|
<input type="button" id="delete" οnclick="deleteTable()" value="刪除" />|
<input type="submit" id="submit" οnclick="submitTable()" value="提交" />
</tr>
<tr id="untr">
<td width="5%"> </td>
<td width="25%">姓名</td>
<td width="25%">性別</td>
<td width="45%">描述</td>
</tr>
</table>
<table id="table3" border="1" width="60%" align="center">
</table>
</body>
</html>
