Question

我有这个html表：

<table border="1">
  <tr>
    <th>Map</th>
    <th>Source Table</th>
    <th>Target Table</th>
  </tr>

  <tr class="schema">
    <td>
      <input class="map" id="empire" name="source" type="checkbox" />
    </td>
    <td>empire</td>
    <td>
      <input class="hive" id="empire-hive" name="hive" placeholder="empire" disabled/>
    </td>
  </tr>

  <tr class="schema">
    <td>
      <input class="map" id="starfleet" name="source" type="checkbox" />
    </td>
    <td>starfleet</td>
    <td>
      <input class="hive" id="starfleet-hive" name="hive" placeholder="starfleet" disabled/>
    </td>
  </tr>

</table>

你可以看到涉及两行。可能有多达100个。我在页面上有一个按钮，点击后，我需要执行以下操作：

浏览每一行，看看是否在第一个单元格中单击了复选框
如果选中复选框，则获取第二个单元格的值，然后在第三个单元格中输入。
如果选中，请获取这些值并发送到ajax

我得到1和3.我没有的是2。如何在jquery中遍历行，以便执行＃3？

感谢。

更新＃1首次尝试：

$('#save').click(function() {
  $('.schema').each(function() {
    if ($(this + " td input").attr("checked")) {
      source = $(this + " td:2").html();
      hive = $(this + " td:3 input").val();
      alert(source + " " + hive);
    }
  });
});

第二次尝试：

$('#save').click(function() {
  $('.schema').each(function() {
    if ($(this + " td:nth-child(1) input").attr("checked")) {
      source = $(this + " td:nth-child(2)").html();
      hive = $(this + " td:nth-child(3) input").val();
      alert(source + " " + hive);
    }
  });
});

我仍然遇到“目标”问题。非常感谢。

Answer 1

而不是遍历每一行。只需找到选中的复选框，然后遍历这些复选框并逐步查看表格单元格获取值并更新文本框。这是一个小提琴：http://jsfiddle.net/fsd2urgo/

$(function(){
  $('#save').click(function() {
    $('.map:checked').each(function(){
      var src = $(this).parent().next()
      var srcText = src.html();
      src.next().find('input').val(srcText);
    });
  });
})

Answer 2

使用.prop代替.attr，如下所示。你也错误地使用$（this）而你必须使用：eq（）而不是：nth-child

if ($(this).find("td:eq(0) input").prop("checked")) { ...

比较.find（）：http://api.jquery.com/find/和：eq（）：http://api.jquery.com/eq-selector/

如何在表中循环以获取元素值

2 个答案: