javascript - 如何为每个具有附加数字的 id 的元素使用 Javascript 函数

Question

我正在尝试制作一个可以包含多个条目的时间表，因此我设置了下表，但是，我不确定如何为每个“总计”元素运行相同的函数。

<table width="100%" id="table" border="0">
  <tr id="headers">
    <td width="15%">Name</td>
    <td width="15%">Info</td>
    <td width="10%">Monday</td>
    <td width="10%">Tuesday</td>
    <td width="10%">Wednesday</td>
    <td width="10%">Thursday</td>
    <td width="10%">Friday</td>
    <td width="10%">Total</td>
  </tr>
  <tr id="1">
    <td width="15%">
      <input name="name1" id="name1">
    </td>
    <td width="15%">
      <input name="info1" id="info1">
    </td>
    <td width="10%">
      <input name="mo1" id="mon1">
    </td>
    <td width="10%">
      <input name="tue1" id="tue1">
    </td>
    <td width="10%">
      <input name="wed1" id="wed1">
    </td>
    <td width="10%">
      <input name="thu1" id="thu1">
    </td>
    <td width="10%">
      <input name="fri1" id="fri1">
    </td>
    <td width="10%" id="total1"></td>
  </tr>
  <tr id="2">
    <td width="15%">
      <input name="name2" id="name2">
    </td>
    <td width="15%">
      <input name="info2" id="info2">
    </td>
    <td width="10%">
      <input name="mon2" id="mon2">
    </td>
    <td width="10%">
      <input name="tues2" id="tue2">
    </td>
    <td width="10%">
      <input name="wed2" id="wed2">
    </td>
    <td width="10%">
      <input name="thu2" id="thu2">
    </td>
    <td width="10%">
      <input name="fri2" id="fri2">
    </td>
    <td width="10%" id="total2"></td>
  </tr>
  <!-- More here -->
</table>

因此，人们会在输入字段中输入信息，然后 id="total[i]" 将计算一周的总数。但是，如果不为 1、2、3 等执行单独的功能，我不知道如何为它们执行 for 循环。

Answer 1

我建议您修改 HTML 代码，使每个 tr 都相同。这使得编写适用于表中 tr 的任何实例的 DRY 代码变得更加容易，并且还使将来的维护很多更容易。为此，您可以使用类来识别表中的 td 和 input 元素，如下所示:

$('.day').change(calcRowTotals).change();

function calcRowTotals() {
  $('table tr:gt(0)').each(function() {
    var $row = $(this), total = 0;
    $row.find('.day').each(function() {
      total += parseInt($(this).val(), 10) || 0;
    });
    $row.find('.total').text(total);
  });
}

html {
  padding: 50px 0 0;
}
input {
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" id="table" border="0">
  <tr id="headers">
    <td width="15%">Name</td>
    <td width="15%">Info</td>
    <td width="10%">Monday</td>
    <td width="10%">Tuesday</td>
    <td width="10%">Wednesday</td>
    <td width="10%">Thursday</td>
    <td width="10%">Friday</td>
    <td width="10%">Total</td>
  </tr>
  <tr>
    <td>
      <input name="name1" class="name">
    </td>
    <td>
      <input name="info1" class="info">
    </td>
    <td>
      <input name="mo1" class="mon day" value="1">
    </td>
    <td>
      <input name="tue1" class="tue day" value="2">
    </td>
    <td>
      <input name="wed1" class="wed day" value="3">
    </td>
    <td>
      <input name="thu1" class="thu day" value="4">
    </td>
    <td>
      <input name="fri1" class="fri day" value="5">
    </td>
    <td class="total"></td>
  </tr>
  <tr>
    <td>
      <input name="name2" class="name">
    </td>
    <td>
      <input name="info2" class="info">
    </td>
    <td>
      <input name="mon2" class="mon day" value="6">
    </td>
    <td>
      <input name="tues2" class="tue day" value="7">
    </td>
    <td>
      <input name="wed2" class="wed day" value="8">
    </td>
    <td>
      <input name="thu2" class="thu day" value="9">
    </td>
    <td>
      <input name="fri2" class="fri day" value="10">
    </td>
    <td class="total"></td>
  </tr>
  <!-- More here -->
</table>