用Javascript添加新單元格到表格

-2

如何使用Javascript將新單元格添加到我的表格中？輸入到bowlersName的文本應該是新單元格的文本。用Javascript添加新單元格到表格

<script type="text/javascript"> 
/* <![CDATA[ */ 
/* ]]> */ 
</script> 
</head> 
<body> 

<!-- HEADER 1 & 2 --> 
<h1>Central Valley Lanes</h1> 
<h2>2008 Bowling Teams</h2> 


Bowler's name <input type="text" name="bowlersName" size="15" /><input type="button" value="Add Bowler" /> 
<h2>Team Roster</h2> 
<form action="FormProcessor.html" method="get"> 
<table border="1" id="bowlerList"> 
<tr><td id="empty">Your team roster is empty</td></tr> 
</table> 
<br /> 
<input type="button" value="Submit Roster" /> 
</form>

來源

2013-04-28 Johnson McQuillen O' Doneall

好的，所以你可以使用jQuery來添加基於輸入的單元格。像這樣的東西應該工作：

var NewName = $("#bowlersName").val(); 
jQuery("#bowlerList tr").First().Before("<tr><td>" + NewName "</td></tr>");

這樣做是首先找到那麼表，發現表的TR元素。從這些元素中找到第一個tr元素並在它之前添加新的單元格。這將從上到下流動，因爲最新的元素將位於頂部，而最舊的元素位於底部。

得到一個從左到右類型使用本：

jQuery("#bowlerList tr").First().Append("<td>" + NewName + "</td>");

看看這個網站代碼的完整解釋： http://api.jquery.com/

此外，如果你想刪除單元格說你有沒有保齡球這可能是工作：

jQuery("#empty").remove();

來源

2013-04-28 23:21:12 Nomad101

謝謝，你能給我完整的代碼嗎？我現在真的需要它.. – 2013-04-28 23:23:20

@Johnson查找他使用的jQuery函數並編寫自己的！這很簡單。 – doppelgreener 2013-04-28 23:24:18

如果你不使用jQuery，你可以做這樣的：

var tr = document.createElement('tr'); 
var td = tr.appendChild(document.createElement('td')); 
td.innerText = "Your new row text"; 
document.getElementById("bowlerList").appendChild(tr);

來源

2013-04-28 23:23:51

我其實對這種做事方式有一個疑問。無論如何，使用這個想法來完成jquery.before（）方法嗎？我的印象是，在某些情況下純粹的遍歷可能會更快。 – Nomad101 2013-04-28 23:31:17

當然。 'var table = document.getElementById（「bowlerList」）;''table.insertBefore（tr，table.firstChild）;' – 2013-04-28 23:34:01

好的我正在更加關注insertBefore是否確實表現得像我認爲的那樣。感謝您的澄清。 – Nomad101 2013-04-28 23:36:42

用Javascript添加新單元格到表格

回答

相關問題