-2

如何使用 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>
4

2 回答 2

1

如果你不使用 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-28T23:23:51.527 回答
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();
于 2013-04-28T23:21:12.753 回答