日期:2014-05-16  浏览次数:20370 次

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

------解决方案--------------------
直接innerHmtl("<tr><td><select></td><td><input type="text"></td><td><input type="button"></td></tr>")
------解决方案--------------------
HTML code


<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>

------解决方案--------------------
HTML code
<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>

------解决方案--------------------
HTML code

......
<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();"/>
......