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 に答える