Question

我需要比较<TD>和<TR>元素的类名。如果它们匹配，那么我需要能够在单击TD时删除TR。这是一些代码：

$("#button1").click(function() {
  $("table").find("tr:not(:nth-child(1))").remove();
});

$("tr").click(function() {
  $(this).append($("<td>", {
    text: $(this).attr("class")
  }));
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#table td {
  padding: 25px;
  font-size: 25px;
  text-align: center;
}

#table th {
  font-size: 30px;
  padding: 25px
}

div {
  display: block;
}

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>

<body>


  <div>
    <table border="1" id="table">
      <tr class="class1">
        <th>Year</th>
        <th>Savings</th>
      </tr>
      <tr class="class2">
        <td>2014</td>
        <td>$10000</td>
      </tr>
      <tr class="class3">
        <td>2015</td>
        <td>$8000</td>
      </tr>
      <tr class="class4">
        <td>2016</td>
        <td>$9000</td>
      </tr>
    </table>

    <p>
      <input id="button1" type="button" value="Click to remove all rows except first one" />
    </p>
  </div>

</body>

</html>

现在，我可以使用它了，以便单击TD时可以添加TR，但是问题是它一直在添加TD。添加完毕后，我需要通过再次单击TR将其删除。为此，我需要比较新创建的TD和现有TR的类名。如果它们匹配，我需要将其删除。

Answer 1

使用.filter()查找文本与您单击的td的类匹配的tr。如果发现任何内容，请将其删除，否则添加一个新的内容。

$("#button1").click(function() {
  $("table").find("tr:not(:nth-child(1))").remove();
});

$("tr").click(function() {
  var classname = $(this).attr("class");
  var tr = $(this).find("td").filter(function() {
    return $(this).text() == classname;
  });
  if (tr.length == 0) {
    $(this).append($("<td>", {
      text: classname
    }));
  } else {
    tr.remove();
  }
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#table td {
  padding: 25px;
  font-size: 25px;
  text-align: center;
}

#table th {
  font-size: 30px;
  padding: 25px
}

div {
  display: block;
}

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>

<body>


  <div>
    <table border="1" id="table">
      <tr class="class1">
        <th>Year</th>
        <th>Savings</th>
      </tr>
      <tr class="class2">
        <td>2014</td>
        <td>$10000</td>
      </tr>
      <tr class="class3">
        <td>2015</td>
        <td>$8000</td>
      </tr>
      <tr class="class4">
        <td>2016</td>
        <td>$9000</td>
      </tr>
    </table>

    <p>
      <input id="button1" type="button" value="Click to remove all rows except first one" />
    </p>
  </div>

</body>

</html>

Answer 2

根据您的描述，您甚至不需要比较类。这很方便，因为您从未将类分配给新单元格。

而是根据单元格计数显示和隐藏单元格

$("#button1").click(function() {
  $("table").find("tr:not(:nth-child(1))").remove();
});

$("tr").click(function() {
  //If we have 2 cell add
  if($(this).find("td").length === 2) {  
  $(this).append($("<td>", {
    text: $(this).attr("class")
  }));
  //Otherwise remove
  }else{
    $(this).find("td:last-child").remove();
  }
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#table td {
  padding: 25px;
  font-size: 25px;
  text-align: center;
}

#table th {
  font-size: 30px;
  padding: 25px
}

div {
  display: block;
}

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>

<body>


  <div>
    <table border="1" id="table">
      <tr class="class1">
        <th>Year</th>
        <th>Savings</th>
      </tr>
      <tr class="class2">
        <td>2014</td>
        <td>$10000</td>
      </tr>
      <tr class="class3">
        <td>2015</td>
        <td>$8000</td>
      </tr>
      <tr class="class4">
        <td>2016</td>
        <td>$9000</td>
      </tr>
    </table>

    <p>
      <input id="button1" type="button" value="Click to remove all rows except first one" />
    </p>
  </div>

</body>

</html>

Answer 3

这是一种解决方法。我使用隐藏/显示<TD>而不是类比较。

$("#button1").click(function() {
  $("table").find("tr:not(:nth-child(1))").remove();
});

  $(".class2").click(function() {
    $(".TD2").toggleClass("show");
  });
  $(".class3").click(function() {
    $(".TD3").toggleClass("show");
  });
  $(".class4").click(function() {
    $(".TD4").toggleClass("show");
  });

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #table td {
      padding: 25px;
      font-size: 25px;
      text-align: center;
    }

    #table th {
      font-size: 30px;
      padding: 25px
    }
    div {
      display: block;
    }
.TD2, .TD3, .TD4 {
  display: none;
}
.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>

<body>


  <div>
    <table border="1" id="table">
      <tr class="class1">
        <th>Year</th>
        <th>Savings</th>
      </tr>
      <tr class="class2">
        <td>2014</td>
        <td>$10000</td>
        <td class="TD2">class2</td>
      </tr>
      <tr class="class3">
        <td>2015</td>
        <td>$8000</td>
        <td class="TD3">class3</td>
      </tr>
      <tr class="class4">
        <td>2016</td>
        <td>$9000</td>
        <td class="TD4">class4</td>
      </tr>
    </table>

    <p>
      <input id="button1" type="button" value="Click to remove all rows except first one" />
    </p>
  </div>

</body>

</html>

如何比较ClassName，以便删除TD标签？

3 个答案: