javascript - 如何从表中删除一行

Question

如果该行在第 3 列中包含一个空单元格，则下面的代码会删除该行。
它利用了 Jquery 的 fadeOut-method 来达到很好的效果。
问题是，如果没有 faeOut 方法，我将无法使代码正常工作。

我尝试了 $(this).remove(); 但它不起作用。

function TT(){
  var A = 3;
  $('table tbody tr td:nth-child(' + A + ')').each(function(index){
    var cellValue = $("#tbl tr:eq(" + index + ") td:eq(" + A + ")").text();
    if (cellValue.length === 0){
      $(this).parents('tr').fadeOut(function(){
        $(this).remove(); 
      });
    }
  });
}

table {
    margin: 10px;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 95%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
    <td>E1</td>
    <td>F1</td>
    <td>G1</td>
    <td>H1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td></td>
    <td>E2</td>
    <td>F2</td>
    <td>G2</td>
    <td>H2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
    <td>C3</td>
    <td>D3</td>
    <td>E3</td>
    <td>F3</td>
    <td>G3</td>
    <td>H3</td>
  </tr>
  <tr>
    <td>A4</td>
    <td>B4</td>
    <td>C4</td>
    <td>D4</td>
    <td>E4</td>
    <td>F4</td>
    <td>G4</td>
    <td>H4</td>
  </tr>
  <tr>
    <td>A5</td>
    <td>B5</td>
    <td>C5</td>
    <td></td>
    <td>E5</td>
    <td>F5</td>
    <td>G5</td>
    <td>H5</td>
  </tr>
  <tr>
    <td>A6</td>
    <td>B6</td>
    <td>C6</td>
    <td></td>
    <td>E6</td>
    <td>F6</td>
    <td>G6</td>
    <td>H6</td>
  </tr>
    <tr>
    <td>A7</td>
    <td>B7</td>
    <td>C7</td>
    <td>D7</td>
    <td>E7</td>
    <td>F7</td>
    <td>G7</td>
    <td>H7</td>
  </tr>
    <tr>
    <td>A8</td>
    <td>B8</td>
    <td>C8</td>
    <td></td>
    <td>E8</td>
    <td>F8</td>
    <td>G8</td>
    <td>H8</td>
  </tr>
    <tr>
    <td>A9</td>
    <td>B9</td>
    <td>C9</td>
    <td>D9</td>
    <td>E9</td>
    <td>F9</td>
    <td>G9</td>
    <td>H9</td>
  </tr>
    <tr>
    <td>A10</td>
    <td>B10</td>
    <td>C10</td>
    <td>D10</td>
    <td>E10</td>
    <td>F10</td>
    <td>G10</td>
    <td>H10</td>
  </tr>
    <tr>
    <td>A11</td>
    <td>B11</td>
    <td>C11</td>
    <td>D11</td>
    <td>E11</td>
    <td>F11</td>
    <td>G11</td>
    <td>H11</td>
  </tr>
</table>
</br>
 <button type="button" onclick="TT()">Click Me!</button>

Answer 1

您多次查询“表”。这不是必需的。只有第一个循环遍历所有第 3 列元素就足以确定单元格是否为空并删除完整的行。

function TT(){
		var A = 4;
		$('table tbody tr td:nth-child(' + A + ')')
    .each(function(index){
    if($(this).text()=="" )  {$(this).parent().remove();}
		});
	}

table {
    margin: 10px;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 95%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
    <td>E1</td>
    <td>F1</td>
    <td>G1</td>
    <td>H1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td></td>
    <td>E2</td>
    <td>F2</td>
    <td>G2</td>
    <td>H2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
    <td>C3</td>
    <td>D3</td>
    <td>E3</td>
    <td>F3</td>
    <td>G3</td>
    <td>H3</td>
  </tr>
  <tr>
    <td>A4</td>
    <td>B4</td>
    <td>C4</td>
    <td>D4</td>
    <td>E4</td>
    <td>F4</td>
    <td>G4</td>
    <td>H4</td>
  </tr>
  <tr>
    <td>A5</td>
    <td>B5</td>
    <td>C5</td>
    <td>D5</td>
    <td>E5</td>
    <td>F5</td>
    <td>G5</td>
    <td>H5</td>
  </tr>
  <tr>
    <td>A6</td>
    <td>B6</td>
    <td>C6</td>
    <td>D6</td>
    <td>E6</td>
    <td>F6</td>
    <td>G6</td>
    <td>H6</td>
  </tr>
 


</table>
</br>
 <button type="button" onclick="TT()">Click Me!</button>