如何从表格中删除行

Question

如果下面的代码在第三列中包含一个空单元格，则删除该行。
它利用了Jquery的fadeOut方法获得了不错的效果。
问题是，如果没有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

您多次查询“ table”。这不是必需的。 仅第一个循环遍历所有第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> 

Answer 2

无需使用.each()即可使用.filter()

 function TT(){ var A = 3; $('table tbody tr').filter(function(){ return $('td:eq('+ A +')' , this).text() == ''; // good to use `.text().trim()` to avoid any white-spaces }).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> 

注意：如果您从<td>开始， parent() ， parents() ， closest()都应该起作用。但是对我来说，简单的事情是从<tr>而不是从<td>

另一注：： :nth-child(index)索引从1开始:eq(index)从0开始