Question

如何使用Javascript向表中添加新单元格？输入 bowlersName 的文本应该是新单元格的文本。

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

Answer 1

好的，你可以使用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();

Answer 2

如果您不使用jQuery，可以这样做：

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

使用Javascript向表中添加新单元格

2 个答案: