如何从表中删除行

时间：2018-03-29 22:34:31

标签： javascript jquery

如果第3列中包含空单元格，则代码会删除该行 它利用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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

无需使用.each()，您只需使用.filter()

即可

＆＃13;
＆＃13; 
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();
}
＆＃13; 
table {
    margin: 10px;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 95%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

  

注意： parent()，parents()，closest()如果您从<td>开始，所有这些都应该有效...但对我来说很简单事情就是开始   来自<tr>而不是<td>

另一个注意事项： :nth-child(index)索引从1开始...... :eq(index)从0开始

相关问题
最新问题