使用JS，如何动态生成表格及表格中的按钮

Question

function addRow(){
var tblObj = document.getElementById("table1");
if(tblObj.rows){
alert(tblObj.rows.length);
}else{
alert('aaa');
}
//追加行
var newRow = tblObj.insertRow();
newRow.style.display = "";
var cellNum = tblObj.rows[0].cells.length;//追加列
for (colIndex = 0; colIndex < cellNum; colIndex++) {
var newCell = newRow.insertCell();
initTblCell(newCell);
}
}
function initTblCell(cell){
var lastCell = document.getElementById("table1").rows[0].cells[cell.cellIndex];
cell.innerHTML = lastCell.innerHTML;
alert(cell.innerHTML);
if (cell.children != null && cell.children.length > 0) {
for(childIndex = 0; childIndex < cell.children.length; childIndex++) {
var child = cell.children[childIndex];
switch(child.type) {
case "text":
child.value = "";
break;
case "checkbox":
child.value = "";
child.checked = false;
break;
}
}
}
cell.className = lastCell.className;
cell.align = lastCell.align;
cell.height = lastCell.height;
}
function buttonFun(){
var obj= document.getElementsByName("text4");
for(i=1;i<obj.length;i++){
alert(obj[i].value);
}}
function dellRow(){
var obj= document.getElementById("table1");
var objRow=obj.rows.length-1;
alert(objRow);
if(objRow != 0){
obj.deleteRow(objRow);
}}  <table id="table1" name="table1" width="300">
        <tr style="display:none">
    <td width="100">
    <input type="button" name="testBtn4" value="button" onclick=""/>
    </td>
    <td width="100">
    <input type="text" name="text4"  id="text4"/>
    </td>
    <td width="100">
    123
    </td>
    </tr>
    
    <tr>
    <td width="100">
    <input type="button" name="testBtn4" value="button" onclick="toExcel_Page()"/>
    </td>
    <td width="100">
    <input type="text" name="text4"  id="text4"/>
    </td>
    <td width="100">
    123
    </td>
    </tr>
    </table>
    <input type="button" name="testAdd" id="testAdd" value="AddRow" onclick="addRow()"/>
    <input type="button" name="testAdd" id="testAdd" value="DellRow" onclick="dellRow()"/>
    <input type="button" name="testAdd2" id="testAdd2" value="GetTextValue" onclick="buttonFun()"/>

Answer 1

chr(0)这个不知道，用split分割字符串

Answer 2

请参考DHTML
创建元素createElement
表格有table.insertRow();
行有tr.insertCell();
.....

Answer 3

var newl,newc;
newl=table的id.insertRow();
newc=newl.insertCell();
newc.innerHTML="你要插入html代码";
这样就可以了。

Answer 4

多谢各位，特别是  mingxuan3000(铭轩)   写得很详细
我试试先。

Answer 5

需要定义一个  button 按钮，增加到 第2列上？ 
如何定义？ 如何增加？

Answer 6

tableId.rows[0].cells[1]innerHTML="<input type=button name="aa" onclick=""/>"

Answer 7

var btnHtml ="<input type=button  name=\"aa\" onclick=aa(\"a\") id=\"aa\"/>";
cell.innerHtml = btnHtml;我这样写，为什么不显示？  没有错误提示，就是不显示按钮。

Answer 8

多谢！  我试试看。并感谢 mingxuan3000(铭轩)  的短信回复！

Answer 9

<table width="200" height="54" border="1" align="center" id="iTab">
  <tr id="tr0">
    <td>
      <input name=chk_1 type=checkbox id=chk_1 value="1" />
    </td>
    <td>0</td>
  </tr>
</table><input type="button" name="Submit" value="123" onclick="addTR()" />
  function addTR()
  {
  alert(iTab);   var iTab = document.getElementById("iTab");
   alert(iTab);
  
var iTr = iTab.insertRow(); var cellNum = iTr.insertCell();; //for (colIndex = 0; colIndex < cellNum; colIndex++) 
//{
//var newCell = iTr.insertCell();
        //
cellNum.innerHTML="<td><input name=chk_1 type=checkbox id=chk_1 value='1' /></td>";
       //全插&#36827;一格里去&#21862;.如果分&#24320;写,比如&#35828;在第一格插什&#20040;,在第二格在插什
//}
alert(iTr);
alert(iTab.rows[0].cells[1]);
alert('123');
iTab.rows[0].cells[1].innerHTML="<td><input name=chk_1 type=button id=chk_1 value='1' /></td>";
alert('456');

  }

Answer 10

function addTR()
  {
   var iTab = document.getElementById("iTab");
iTab.rows[0].cells[1].innerHTML="<td><input name=chk_1 type=button id=chk_1 value='1' /></td>";
  }

Answer 11

<table width="200" height="54" border="1" align="center" id="iTab">
  <tr id="tr0">
    <td>
      <input name=chk_1 type=checkbox id=chk_1 value="1" />
    </td>
    <td>0</td>
  </tr>
</table><input type="button" name="Submit" value="123" onclick="addTR()" />

Answer 12

多谢各位，已编写成功了！
特别感谢！  mingxuan3000