Question

我正在尝试在每个点击的行的表格的第一个<td>中切换文字。我之前在互联网上找到的工作有点奇怪（因为我混合了几个例子来得到我想要的东西）。

举例：

<body>
  <table class='table table-bordered table-condensed table-striped table-hover'>
    <tr><th>Name</th><th>Email</th><th>Country</th></tr>
    <tr class="table-row"><td>Yes</td><td>Country</td></tr>
    <tr class="table-row"><td>No</td><td>Country</td></tr>
  </table>

  <script>

    $('.table tbody tr').click( function () {
      var $this = $(this);
      var xText =  $this.text();
      $this.closest('tr').toggleClass('notUse use')
      $this.text(xText==="Yes"?"No":"Yes");
    });

  </script>
</body>

如何在点击的每一行中切换<td>文字（'是'或'否'）？到目前为止，它正在切换，但我的功能是删除下一个<td>（'国家'）中的必要文本。我想在不删除下一个<td>的文字的情况下仅切换“是”/“否”。

Answer 1

尝试以下代码，当您点击tr时，它将允许您切换“是/否”：

$('.table tbody tr').click(function() {
  var $this = $(this).find("td:first");
  var xText = $this.text();
  $this.toggleClass('notUse use')
  $this.text(xText === "Yes" ? "No" : "Yes");

});

诀窍是在开始时使用.find()，结合"td:first"这将选择td tr中的第一个clicked

工作演示

$('.table tbody tr').click(function() {
  var $this = $(this).find("td:first");
  var xText = $this.text();
  $this.toggleClass('notUse use')
  $this.text(xText === "Yes" ? "No" : "Yes");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='table table-bordered table-condensed table-striped table-hover'>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Country</th>
  </tr>
  <tr class="table-row">
    <td>Yes</td>
    <td>Country</td>
  </tr>
  <tr class="table-row">
    <td>No</td>
    <td>Country</td>
  </tr>
</table>

Answer 2

如果您想切换表格中的特定列，请尝试使用代码段

 $('.table tbody tr td').on('click', function () {
     var $this = $(this);
     if($this.index() == 0)
     {
       var xText =  $this.text();
       $this.closest('tr').toggleClass('notUse use')
       $this.text(xText==="Yes"?"No":"Yes");
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='table table-bordered table-condensed table-striped table-hover'>
<tr><th>Name</th><th>Email</th><th>Country</th></tr>
 <tr class="table-row">
 <td>Yes</td>
 <td>a@a.com</td>
 <td>Country</td>
 </tr>
 <tr class="table-row">
 <td>No</td>
 <td>b@b.com</td>
 <td>Country</td>
 </tr>
 </table>

行中的jquery切换文本在第一个td或div中单击

2 个答案: