在table中用javascript增加一行

Question

在table中用javascript增加一行，然后在增加的行里，第一列为<select>,第二列为<input type="text"> ,第三列为<input type="button">

Answer 1

直接innerHmtl("<tr><td><select></td><td><input type="text"></td><td><input type="button"></td></tr>")

Answer 2

那原来的不是被复盖了哦
这样差不多table.innerHmtl+=" <tr> <td> <select> </td> <td> <input type="text"> </td> <td> <input type="button"> </td> </tr>"

Answer 3

<table id="table">
<tr>
<td class="tabletitle">select</td>
<td class="tabletitle">text</td>
<td class="tabletitle">button</td>
</tr>
</table> <INPUT name=addrow2 type=button value=增加行 onclick="add(table);"> 
<script>
function add(id) 
{ 
var row = id.insertRow(id.rows.length); 
var col = row.insertCell(0);
col.innerHTML = "<select>"; 
var col = row.insertCell(1); 
col.innerHTML = "<input type='text'>"; 
col = row.insertCell(2); 
col.innerHTML = "<INPUT>"; 
} 
</script>

Answer 4

<table id=tbl1 border=1>
</table>
<input type=button onclick="add();" value=add>
<script>
function add(){
    var tbl=document.getElementById("tbl1").childNodes[0];
    var tr=document.createElement("tr");
    var td1=document.createElement("td");
    var td2=document.createElement("td");
    var td3=document.createElement("td");
    
    td1.innerHTML="<select></select>";
    td2.innerHTML="<input type=text value=1>";
    td3.innerHTML="<input type=button>";
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tbl.appendChild(tr);
}
</script>

Answer 5

......
<script>
    function addRow() {
        // 获取table实例
         var topicsTable = document.getElementById("topicsTable");
        // 添加行
var newTR = topicsTable.insertRow(topicsTable.rows.length);
        // 添加第一列
var newNameTD = newTR.insertCell(0);
newNameTD.innerHTML = "<select></select>";
        
        // 添加第二列
         var newNameTD = newTR.insertCell(1);
newNameTD.innerHTML = "<input type='text' name='text'>";
        
        // 添加第三列
         var newNameTD = newTR.insertCell(2);
newNameTD.innerHTML = "<input type='button' name='button'>";
    }
</script><table id="topicsTable" border="0" cellpadding="0" cellspacing="0">
</table><input type="button" value="添加一行" onclick="addRow();"/>
......

Answer 6

4 楼的高手，请问一下obj.childNodes[0]是什么 意思

Answer 7

obj.childNodes[0]//table的子節点tbody

Answer 8

<table id=tbl1 border=1>
</table>
<input type=button onclick="add();" value=add>
<script>
function add(){
    var tbl=document.getElementById("tbl1").childNodes[0];alert(tbl.tagName);//table的子節点tbody
    var tr=document.createElement("tr");
    var td1=document.createElement("td");
    var td2=document.createElement("td");
    var td3=document.createElement("td");
    
    td1.innerHTML="<select></select>";
    td2.innerHTML="<input type=text value=1>";
    td3.innerHTML="<input type=button>";
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tbl.appendChild(tr);
}
</script>

Answer 9

jQuery:$('<tr><td><select /></td><td><input type="text" /></td><td><input type="button" /></td></tr>').appendTo('#tableID');