1

我想编写这样的脚本，一旦单击一个按钮，它必须向现有表添加一个新行

  <!DOCTYPE html> 
    <html> 
    <head> 
    	<script>
    		function myFunction() { 
    			<tr><td></td></tr>
    		}
    	</script> 
    </head> 
    <body> 
    	<table border="1" id="mytable"> 
    		<tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> 
    		<tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> 
    	</table> 
    	<button onclick="myFunction()">Try it</button> 
    </body
    </html>

请帮助我怎么做？

4

4 回答 4

1

尝试使用 javascriptinsertRow()方法。

参考：http ://www.w3schools.com/jsref/met_table_insertrow.asp

工作示例：http ://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

于 2013-03-25T07:30:10.800 回答
1

试试这样的功能：

    function myFunction() { 
        str=document.getElementById('mytable').innerHTML;
        newstr='<tr><td><select><option value="ACT">ACT</option> <option value="NSW">NSW</option> <option value="NT">NT</option> <option value="QLD">QLD</option> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="VIC">VIC</option></select></td><td>row n cell 2</td></tr>';
        document.getElementById('mytable').innerHTML=str+newstr;
    }
    <table border="1" id="mytable"> 
        <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> 
        <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> 
    </table> 
    <button onclick="myFunction()">Try it</button>

小提琴：http: //jsfiddle.net/QYg5a/1

您也可以尝试http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

于 2013-03-25T07:33:32.773 回答
0 

   function addRow(tableID) { 
  
            var table = document.getElementById(tableID); 
  
            var rowCount = table.rows.length; 
            var row = table.insertRow(rowCount); 
  
            var cell1 = row.insertCell(0); 
            var element1 = document.createElement("input"); 
            element1.type = "checkbox"; 
            element1.name="chkbox[]"; 
            cell1.appendChild(element1); 
  
            var cell2 = row.insertCell(1); 
            cell2.innerHTML = rowCount + 1; 
  
            var cell3 = row.insertCell(2); 
            var element2 = document.createElement("input"); 
            element2.type = "text"; 
            element2.name = "txtbox[]"; 
            cell3.appendChild(element2); 
  
  
        } 
    <BODY> 
  
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
  
    <TABLE id="dataTable" width="350px" border="1"> 
        <TR> 
            <TD><INPUT type="checkbox" name="chk"/></TD> 
            <TD> 1 </TD> 
            <TD> <INPUT type="text" /> </TD> 
        </TR> 
    </TABLE> 
  
    </BODY>

如果它满足你的要求，试试这个

于 2013-03-25T07:36:29.410 回答
0

试试这个：这里 tbl 是您要插入新行的表的 id。 

 $("#add_row").click(function () {
   var new_row = "<tr><td>Test1</td><td>Test2</td></tr>";
   $("#tbl").append(new_row);
 });
于 2013-03-25T07:48:22.037 回答