Question

我使用javascript和html5创建了一个网页。它像一个自由板。

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

表格在第一行有选择器和按钮，其他人有检查第一个td的盒子和第二个td的数字。
如果选中“复选框”，则会添加写入次数阵列。
如果我点击按钮，则执行选定的工作。

这就是我的想法。

然后，我如何获得数字？

表格的行是动态的，所以我无法正常使用。

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

<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>

这是我桌子的一行代码。表由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

如果您的号码是身份证明。这是我的想法（使用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);
   }
});

来自同一行中的表数据的getElement

2 个答案: