如果输入为空，如何隐藏表格行？答案

【问题标题】：How to hide table row if input is empty?如果输入为空，如何隐藏表格行？
【发布时间】：2021-08-06 21:28:12
【问题描述】：

如何让 Jquery 检测表格内的输入字段是否为空？

如果输入为空，我想隐藏该行。我该怎么做？如果输入不在行内，我设法隐藏该行。

<table id="entryTable">
<tr>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Age</th>
<tr>
<tr>
 <td><input type="text" name="f_name" /></td>
 <td><input type="text" name="l_name" /></td>
 <td><input type="text" name="age" /></td>
</tr>
<tr>
 <td><input type="text" name="f_name" /></td>
 <td><input type="text" name="l_name" /></td>
 <td><input type="text" name="age" /></td>
</tr>
</table>

$('#entryTable tr').each(function() {
    if ($(this).find('td:empty').length) $(this).remove();
});

【问题讨论】：

标签： html jquery

【解决方案1】：

你可以试试这样的：

$('#entryTable tbody tr').each(function() {
  var n = $(this).find("td").filter(function() {
    if ($("input", this).length) return $("input", this).val().length == 0;
    return $(this).text().length == 0
  })
  if (n.length == $(this).find("td").length) $(this).remove();
});

问题是由于输入，您的td 都不是空的。

演示

$('#entryTable tbody tr').each(function() {
  var n = $(this).find("td").filter(function() {
    if ($("input", this).length) return $("input", this).val().length == 0;
    return $(this).text().length == 0
  })
  if (n.length == $(this).find("td").length) $(this).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="entryTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="f_name" /></td>
      <td><input type="text" name="l_name" /></td>
      <td><input type="text" name="age" /></td>
    </tr>
    <tr>
      <td><input type="text" name="f_name" /></td>
      <td><input type="text" name="l_name" /></td>
      <td><input type="text" name="age" /></td>
    </tr>
    <tr>
      <td><input type="text" name="f_name" /></td>
      <td><input type="text" name="l_name" value="name" /></td>
      <td><input type="text" name="age" /></td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

$('#entryTable tbody tr').each(function() {
  var n = $(this).find("td").filter(function() {
    if ($("input", this).length) 
    return $("input", this).val().length == 0;
    return $(this).text().length == 0
  })
  if (n.length == $(this).find("td").length) $(this).remove();
});

tabel,tr,td{
border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="entryTable">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
    </tr>
      <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
      
      <tr>

          <td><input type="text" name="f_name" /></td>
          <td><input type="text" name="l_name" /></td>
          <td><input type="text" name="age" /></td>
      </tr>
        <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
        <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
        <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
</table>

【讨论】：