Question

我有一个ID为xxxx的复选框，我正在尝试从该复选框访问WaLia中的<td>个文本，以便我可以使用该文本进行ajax请求。

<tbody style="border:1px solid transparent; background-color:#242424; color:#A1A6AB; text-align: left;">
  <tr>
    <td style="padding: 14px;">01</td>
    <td>WaLia</td>
    <td>Walia@gmail.com</td>
    <td>+1 222 555 6666</td>
    <td>Ontario, Canada</td>
    <td>
      <label class="switch">
      <input type="checkbox" id="xxxx">
      <span class="slider round"></span>
      </label>
    </td>
  </tr>
</tbody>

到目前为止设法做到：

<script>
  $("#xxxx").click(function(e){
    if (e.target.checked){
      var msg = $(this).prev().text(); // need "WaLia" here
      console.log(msg);
      //alert(1);
    }else{
      console.log('lol');
      //alert(2);
    }

  });
</script>

请注意，<tr>中存在更多<tbody>个对象，每个对象都有唯一的checkbox ID。

Answer 1

您应该选择tr元素，然后选择文本所在的第二个孩子。然后做你想做的事。

var parent = $("#xxxx").parent(); // td element of your input
var grandParent = parent.parent(); // tr element
var element = grandParent.children().eq(2); // selecting the second child
console.log(element.text()); // your text

希望它会为您提供帮助。

更新。 如果“ xxxx”对于每个输入都是相同的，则不要使用id。使用类原因ID在特殊情况下使用，而类用于重复元素。

HTML

<tr>
  <td style="padding: 14px;">01</td>
  <td>WaLia123</td>
  <td>Walia123@gmail.com</td>
  <td>+1 222 555 1234</td>
  <td>Torrento, Canada</td>
  <td>
    <label class="switch">
      <input type="checkbox" class="xxxx"><!--use class, not id!-->
      <span class="slider round"></span>
    </label>
  </td>
</tr>

JS

$(".xxxx").click(function(e){
    if (e.target.checked){
      var parent= $(this).parent().parent(); // td element of your input
      var grandParent = parent.parent(); // tr element
      var element = grandParent.children().eq(2);
      console.log(element.text());
      //alert(1);
    }else{
      console.log('lol');
      //alert(2);
    }

  });

Answer 2

您可以使用$(this).closest('tr').find('td:nth(1)').text()获取最接近的tr，然后在nth内找到td tr元素，然后访问其文本。

注意请勿使用$("#xxxx").click，因为它只会将点击事件分配给ID为xxxx的第一个元素。 id selector(#)就是这样工作的。您可以使用$("[id='xxxx'").click代替。

$("[id='xxxx'").click(function(e) {
  if (e.target.checked) {
    var msg = $(this).closest('tr').find('td:nth(1)').text(); // need "WaLia" here
    console.log(msg);
    //alert(1);
  } else {
    console.log('lol');
    //alert(2);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table>
  <tbody style="border:1px solid transparent; background-color:#242424; color:#A1A6AB; text-align: left;">
    <tr>
      <td style="padding: 14px;">01</td>
      <td>WaLia</td>
      <td>Walia@gmail.com</td>
      <td>+1 222 555 6666</td>
      <td>Ontario, Canada</td>
      <td>
        <label class="switch">
          <input type="checkbox" id="xxxx">
          <span class="slider round"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td style="padding: 14px;">01</td>
      <td>WaLia123</td>
      <td>Walia123@gmail.com</td>
      <td>+1 222 555 1234</td>
      <td>Torrento, Canada</td>
      <td>
        <label class="switch">
          <input type="checkbox" id="xxxx">
          <span class="slider round"></span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

听起来您想使用css选择器来访问元素。假设您想要的值始终在第二个td中，则应该可以使用。

$(this).parent().parent('td:nth-child(2)');

当然，如果您可以在包含文本的元素上放置一个ID并使用getElementById来代替ID，那么代码就不会太脆弱，容易被破坏而变得更加可靠。 HTML结构的细微变化。

更好的是，如果要生成此HTML，则只需将复选框的值分配为与用户可见的值相同，则只需使用e.target.value

<input type="checkbox" value="WaLia" id="xxxx" />

$("#xxxx").click(function(e){
    if (e.target.checked){
      var msg = e.target.value
      console.log(msg);
    } else {
      console.log('lol');
    }
});

jQuery访问中的先前标签文本

3 个答案: