HTML：表和腳本

我想寫這樣的腳本一次點擊一個按鈕，它有一個新的行添加到現有的表HTML：表和腳本

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

Plesae幫助，我可怎麼辦呢？

來源

2013-03-25 Rajiv

<！DOCTYPE HTML> <表邊界= 「1」> 行1，電池1個行1，小區2 行2，小區1 行2，小區2 <按鈕的onclick =「myFunction的（）「>試試 – Rajiv 2013-03-25 07:25:00

請檢查這一個 http：///stackoverflow.com/questions/171027/add-table-row-in-jquery – Varada 2013-03-25 07:31:02

嘗試使用javascript insertRow()方法。

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

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

來源

2013-03-25 07:30:10 Mal

非常感謝你，我明白了。在ASP中是可以的。淨 – Rajiv 2013-03-25 08:27:25

謝謝你們我想知道更多的東西如何插入組合在myFunction（）這樣的服裝函數myFunction（）{ str = document.getElementById（'mytable'）。innerHTML; 中newstr =」 <選項值= 「ACT」> ACT <選項值= 「NSW」> NSW <選項值= 「NT」> NT <選項值= 「QLD」> QLD <選項值= 「SA」> SA <選項值= 「TAS」> TAS <選項值= 「VIC」> VIC行n電池2「; document.getElementById（'mytable'）。innerHTML = str + newstr; } – Rajiv 2013-03-25 14:18:11

'code'function myFunction（）{ str = document.getElementById（'mytable'）。innerHTML; 中newstr =」 <選項值= 「ACT」> ACT <選項值= 「NSW」> NSW <選項值= 「NT」> NT <選項值= 「QLD」> QLD <選項值= 「SA」> SA <選項值= 「TAS」> TAS <選項值= 「VIC」> VIC行n電池2「; document.getElementById（'mytable'）。innerHTML = str + newstr; } – Rajiv 2013-03-25 14:20:42

嘗試的功能等：

SCRIPT

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

HTML

<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-25 07:33:32

非常感謝你，我明白了。在ASP.net中是可能的 – Rajiv 2013-03-25 08:28:39

謝謝你們我想知道更多的東西如何插入Combo in myFunction（）像這樣 – Rajiv 2013-03-25 14:18:31

@Rajiv在我的答案中測試上述變化。 – 2013-03-25 16:17:00

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-25 07:36:29

試試這個：這裏TBL是的id你您要插入新行的表格。

$("#add_row").click(function() { 
    var new_row = "<tr><td>Test1</td><td>Test2</td></tr>"; 
    $("#tbl").append(new_row); 
});

來源

2013-03-25 07:48:22 Gerry

HTML：表和腳本

回答

相關問題