Question

我有一个包含3列的简单HTML表格，如下所示。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alpha</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Beta</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  
</table>

</body>
</html>

＆＃13;

如果第二列中有值，我想隐藏第三列的值。

例如在我的表格中（ from the code snippet ），因为这两行在＆＃34; Contact＆＃34;中都有值。我想要来自＆＃34;国家＆＃34;的数据。要隐藏的列。

是否可以在jQuery中执行此操作？

Answer 1

以下代码可以帮助您解决这个问题

$(document).ready(function(){
    $("table tbody tr").each(function() {
        contact = $.trim($(this).children('td:nth-child(2)').html());
        if (contact) {
            $(this).children('td:nth-child(3)').html('');
        }
    });
});

我使用了伪类nth-child，你也可以为td提供类名，并用它来捕获单元格内的数据。

检查工作摘录。

$(document).ready(function(){
    $("table tbody tr").each(function() {
        contact = $.trim($(this).children('td:nth-child(2)').html());
        if (contact) {
            $(this).children('td:nth-child(3)').html('');
        }
    });
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alpha</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Beta</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
    <tr>
    <td>Gamma</td>
    <td></td>
    <td>USA</td>
  </tr>
  
</table>

</body>
</html>

jQuery：根据另一列

1 个答案: