现在当我是表行时，我必须将此功能绑定到选择标签下的选项标签，只有第一行被更改

Question

<table id="t" border="1">
<thead id="tb">
<tr>
<th class="id">Id</th>
<th class="name">Name</th>
<th class="address">Address</th>
<th class="phone">Phone</th>
<th class="email">Email</th>
<th class="age">Age</th>
</tr>
</thead>
<tbody>
<tr>
<%
while(rs.next()) {
%>
<td class="id" id="id" style="text-align: center;"><%=rs.getString(1)%></td>
<td class="name" id="na" style="text-align: center;"><%= rs.getString(2) %></td>
<td class="address" id="ad" style="text-align: center;"><%= rs.getString(3) %></td>
<td class="phone" id="ph" style="text-align: center;"><%= rs.getString(4) %></td>
<td class="email" id="em" style="text-align: center;"><%= rs.getString(5) %></td>
<td class="age" id="ag" style="text-align: center;"><%= rs.getString(6) %></td>
</tr>
<% } %>
</tbody>
</table>

function click_action_2(){
var y = document.getElementById("id");
y.innerHTML = "xx";
var x = document.getElementById("na");
x.innerHTML = "xxxx";
var z = document.getElementById("ad");
z.innerHTML = "xx xxxx xxxx";
var a = document.getElementById("ph");
a.innerHTML = "xxxxxxxxxx";
var b = document.getElementById("em");
b.innerHTML = "[e-mail]";
var c = document.getElementById("ag");
c.innerHTML = "xx";
}  

我现在已将此功能绑定到选择标签下的选项标签，现在当我更改行时，只有第一行被更改。请帮助我提供更好的解决方案。

$("select").bind('change', function(){
switch($(this).val()){
case "1":
click_action_1();
break;
case "2":
click_action_2();
break;
case "3":
click_action_3();
break;
}
});

Answer 1

代码中用于更改行的部分如下所示：

var element = document.getElementById("id-of-element");
element.innerHTML = "whatever";

这里发生的事情是你选择一个元素(使用 id)，然后更改该特定元素。

元素上的id和class之间存在差异。id在整个文档中应该是唯一的。如果使用getElementById()，则始终只能得到一个元素。当您想要更改一组元素(在您的情况下是一堆行)时，您可能会使用class将它们全部选中。

在普通的JavaScript(没有jQuery)中，可以使用getElementsByClassName()或querySelectorAll()来完成。这些函数将返回一组元素，然后您可以迭代这些元素进行更改。

var elements = document.getElementByClassName('class-of-elements');
for (var i = elements.length - 1; i > -1; i--) {
elements[i].innerHTML = 'whatever';
}

如果你使用jQuery(我在$("select").bind区域看到它)，它会更简单一些：

$('.class-of-elements').html('whatever');

这里首先发生的是元素的选择(请注意，类以.开头，就像在 CSS 中一样)。在这一点上，我们正在处理一个jQuery元素集合。.html()功能可让您访问所有元素的innerHTML。传递字符串会将每个元素的innerHTML设置为该字符串。