Question

我有一张有价值观的表格。我在其中一些上添加了一个特殊的class，向我显示当我按下按钮时，所有<td>个标记都会class以预定值更新。

以下是我的非工作代码。我的想法是，当我按下按钮时，所有class="order"的标签都会用字符串更新，即＆＃34;订单已更新＆＃34;

对于后台，我能够使用id来完成，因为当我只有一个单元要更新时，但现在我需要一次更新多个单元。

＆＃13;

$("#button").click(function() {
  $("#mainTable").find("td").each(function() {
    this.html("Order Updated");
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="mainTable">
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td>-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
</table>
<button id="button">Click to update Order</button>

＆＃13;

注意：代码无效。

Answer 1

您的选择器错误，应为$(this)然后只需将特殊类添加到find()

$("#button").click(function() {
  $("#mainTable").find("td.order").each(function() {
   $(this).html("Order Updated");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="mainTable">
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td>-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
</table>
<button id="button">Click to update Order</button>

Answer 2

您可以使用此$("#mainTable td.order").html("Order Updated")方式，而不是使用每种方式。

＆＃13;

$("#button").on("click",function() {
  $("#mainTable td.order").html("Order Updated");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="mainTable">
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td>-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
</table>
<button id="button">Click to update Order</button>

＆＃13;

如何使用单个JS事件更新多个TD标签的内容？

2 个答案: