从同一行的 table 个数据中获取元素

Question

我使用 javascript 和 html5 制作了一个网页。它就像一个自由板。

但是有些问题我无法解决。

Table 第一行有选择器和按钮，其他有勾选第一个 td 的框和第二个 td 的数字。
如果勾选了Checkbox，写的次数会加到数组。
如果我单击按钮，将执行选定的工作。

我是这么想的

那么，我如何得到这些数字？

table 的行是动态的，所以我无法正确设置。

这是我的选择器和执行按钮的代码：

<tr class="taskRow">
  <td colspan="8" style="padding-bottom:10px;">
      <select>
      <option value="delete">writing delete</option>
      <option value="articleBan">writing ban</option>
      <option value="writerBan">writer ban</option>
      </select>
      <input type="submit" value="execute">
  </td>
</tr>

这是我的 table 一行的代码。 Table 由 for 循环

<tr class="articleData">
  <td><input type="checkbox" name="selectData" class="tableData" style="display:table; margin:auto;"></td>
  <td style="text-align:center;" class="tableData"><%=item.num%></td>
  <td class="contentData" class="tableData"><div><a href="/wRead/<%=page%>/<%=item.num%>"><%=item.content%></a></div></td>
  <td style="text-align:center;" class="tableData"><%=item.writer%></td>
  <td style="text-align:center;" class="tableData"><%=item.hit%></td>
  <td style="text-align:center;" class="tableData"><%=item.regDate%></td>
  <td style="text-align:center;" class="tableData"><%=item.goodCount%></td>
  <td style="text-align:center;" class="tableData"><%=item.replyCount%></td>
</tr>

我能想到的一件事是我为每一行创建一个函数并将其应用于 onclick 属性。但是这种方式太复杂了，我觉得不对。

请给我一些想法...

Answer 1

<script>
    function test(o) {
        if (o.checked) {
            // add "num" class to your number td
            console.log(o.parentNode.parentNode.querySelector(".num").innerHTML);
        }
    }
</script>
<table>
<tr class="taskRow">
  <td colspan="8" style="padding-bottom:10px;">
      <select>
      <option value="delete">writing delete</option>
      <option value="articleBan">writing ban</option>
      <option value="writerBan">writer ban</option>
      </select>
      <input type="submit" value="execute">
  </td>
</tr>
<tr class="articleData">
  <!--append the index to the name-->
  <td><input type="checkbox" name="selectData1" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td>
  <!--add "num" class to your number td-->
  <td style="text-align:center;" class="tableData num">1</td>
  <td class="contentData" class="tableData">1a</td>
  <td style="text-align:center;" class="tableData">1b</td>
  <td style="text-align:center;" class="tableData">1c</td>
  <td style="text-align:center;" class="tableData">1d</td>
  <td style="text-align:center;" class="tableData">1e</td>
  <td style="text-align:center;" class="tableData">1f</td>
</tr>
<tr class="articleData">
  <td><input type="checkbox" name="selectData2" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td>
  <td style="text-align:center;" class="tableData num">2</td>
  <td class="contentData" class="tableData">2a</td>
  <td style="text-align:center;" class="tableData">2b</td>
  <td style="text-align:center;" class="tableData">2c</td>
  <td style="text-align:center;" class="tableData">2d</td>
  <td style="text-align:center;" class="tableData">2e</td>
  <td style="text-align:center;" class="tableData">2f</td>
</tr>
<tr class="articleData">
  <td><input type="checkbox" name="selectData3" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td>
  <td style="text-align:center;" class="tableData num">3</td>
  <td class="contentData" class="tableData">3a</td>
  <td style="text-align:center;" class="tableData">3b</td>
  <td style="text-align:center;" class="tableData">3c</td>
  <td style="text-align:center;" class="tableData">3d</td>
  <td style="text-align:center;" class="tableData">3e</td>
  <td style="text-align:center;" class="tableData">3f</td>
</tr>
</table>

Answer 2

如果你的号码是 identity.This 是我的想法（用 jQuery）。希望对你有帮助。

var numbers= [];
$("input.tableData").on('change',function(){
    var number = $(this).closet('tr').children('td')[2].html();
   if($(this).is(":checked")){
     //add number to array
     numbers.push(number);
   }
   else{
     //remove this number from array
      var indx = number.indexOf(number);
      numbers.splice(indx, 1);
   }
});

从同一行的 table 个数据中获取元素

getElement from table data in same row

html

javascript

html-table