Question

我有一个带有复选框，下拉列表和其他附带数据的表格。

我想迭代已经检查过的行，然后提取它的数据，将这些数据添加到字典中，然后添加到主数组中。

似乎是用复选框找到了正确的行，但我的for循环并没有正确地拉动每一行。这是我的js代码：

$("#thechecked").click(function(){
   var send_list = []
   $('#mytable').find(':checkbox:checked').each(function () {
      var dict = {};
      var value = $("#presetChoosen").val();
      var filename = $("#filename").text();
      dict['filename'] = filename
      dict['value'] = value
      send_list.push(dict)

   });
   console.log(send_list)

});

FULL EXAMPLE IN JSFIDDLE

我做错了什么？

Answer 1

您不应该像在select元素上那样使用相同的ID。 Id的元素是独一无二的。

我使用了一些jQuery方法（ parent(), find(), next() ）来定位特定值：

var value = $(this).parent().parent().find("select option:checked").val();
var filename = $(this).parent().next("td").text();

以下是您尝试实现的工作片段：

＆＃13;

$("#thechecked").click(function() {
  var send_list = []
  $('#mytable').find(':checkbox:checked').each(function() {
    var dict = {};
    var value = $(this).parent().parent().find("select option:checked").val();
    var filename = $(this).parent().next("td").text();
    dict['filename'] = filename
    dict['value'] = value
    send_list.push(dict)

  });
  console.log(send_list)

});

＆＃13;

tr,
td {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <tr id="mq">
      <td><input type="checkbox" /></td>
      <td>What</td>
      <td>Meta</td>
      <td>Preset</td>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td><input type="checkbox" /></td>
      <td id="filename_1">Underthesea</td>
      <td>1920x1080</td>
      <td> <select id="presetChoosen_1">        
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
    </tr>
    <tr id="2">
      <td><input type="checkbox" /></td>
      <td id="filename_2">Overthehill</td>
      <td>1280x720</td>
      <td> <select id="presetChoosen_2" value="asd">        
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
    </tr>
    <tr id="3">
      <td><input type="checkbox" /></td>
      <td id="filename">Mocking</td>
      <td>1280x720</td>
      <td> <select id="presetChoosen" value="asd">        
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
    </tr>
  </tbody>
</table>
<button id="thechecked">Get Checked</button>

＆＃13;

Answer 2

您正在重复使用ID属性。 ID应该是唯一的 - 我相信在HTML中重复使用相同的ID实际上是WC3验证错误。

你也没有将你的选择器放在你的复选框上。

将您的id =“”更改为name =“”，然后尝试以下代码概念：

$('#mytable').find('input[type="checkbox"]:checked').each(function () {
    var tr = $(this).closest('tr'),
        filename = tr.find('[name="filename"]').val();

    // [...]
});

Answer 3

获得复选框（在循环内）后，您需要获取该复选框的行，例如：

$("#thechecked").click(function(){
   var send_list = []
   $('#mytable :checkbox:checked').each(function () {
      var row = $(this).closest("tr");

      var value = row.find("#presetChoosen").val();
      var filename = row.find("#filename").text();

      var dict = {};
      dict['filename'] = filename
      dict['value'] = value
      send_list.push(dict)
   });
   console.log(send_list)
});

如果没有你的HTML（在问题中），有点难以100％，并且看起来你的每个行都有相同id的元素，例如id='presetChoosen'，建议不要这样做。

Answer 4

就像接受的答案所说，ids should be unique。我要做的是将filename和presetChoosen更改为类，因为它们是一种类型的东西（class），而不是特定的东西（id）。这样您就可以以更易读且更易于理解的方式遍历DOM：

$("#thechecked").click(function(){
   var send_list = [];
   $('#mytable').find(':checkbox:checked').each(function (index, checkbox) {

      // Find the row this checkbox is in
      var row = $(checkbox).closest('tr'),
        value = row.find('.presetChoosen').val(),
        filename = row.find('.filename').text();

      send_list.push({
        filename: filename,
        value: value
      });

   });
   console.log(send_list);

});

tr,td{border:1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
    <thead>
    <tr id="mq">
        <td></td>
        <td>What</td>
        <td>Meta</td>
        <td>Preset</td>
    </tr>
    </thead>
    <tbody>
        <tr id="1">
        <td><input type="checkbox" /></td>
        <td class="filename" >Underthesea</td>
        <td>1920x1080</td>
        <td> <select class="presetChoosen">
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
        </tr>
        <tr id="2">
        <td><input type="checkbox" /></td>
        <td class="filename" >Overthehill</td>
        <td>1280x720</td>
        <td> <select class="presetChoosen">
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
        </tr>
        <tr id="3">
        <td><input type="checkbox" /></td>
        <td class="filename" >Mocking</td>
        <td>1280x720</td>
        <td> <select class="presetChoosen">
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
        </tr>
    </tbody>
</table>
<button id="thechecked">Get Checked</button>

迭代jQuery中的复选框

4 个答案: