如何从表中删除不等于某个值的行?

时间:2019-04-24 12:27:35

标签: javascript jquery

我有一张看起来像这样的桌子

R1C1     R1C2     R1C3
R2C1     R2C2     R2C3
R3C1     R3C2     R3C3

和一个在找到特定单元格值时从表中删除行的函数。效果很好,请参见下面的功能代码,结果是删除第1行和第3行

但是,当我想做相反的事情时-通过将比较运算符从0更改为-1(如果找不到字符串,indexOf()返回什么),只保留包含指定单元格值的行。函数删除所有行,而不是我期望的第2行。

任何人都可以阐明这一点,并向我提供有关如何完成我想要的目标的解决方案吗?

这是功能代码:

function doFunction() {

let array = ['R3C2','R1C3'];

for (var i = 0; i < array.length; i++) {

    var removeRowWithCell = array[i];

    // change the comparison below to === -1 and it deletes all rows

    $('td').filter(function() {
        return $(this).text().indexOf(removeRowWithCell) === 0;
    }).closest('tr').remove();

   }
}

4 个答案:

答案 0 :(得分:1)

您的=== -1的条件表示“行中至少有一个不等于'R3C2'或'R1C3'的单元格。”

请牢记这一点(每行的第一个单元格与数组“ R3C2”分析的第一个单元格相比):

  • 第一行单元格R1C1:“ R1C1” .indexOf(“ R3C2”)为-1 =>选择了单元格,删除了行

  • 第二行单元格R2C1:“ R2C1” .indexOf(“ R3C2”)为-1 =>选择了单元格,删除了行

  • 第三行单元格R3C1:“ R2C1” .indexOf(“ R3C2”)为-1 =>选择了单元格,删除了行

因此,您最终将所有行都删除了

用于保留包含数组中某些值的行的函数应如下所示:

function doFunction() {
    let array = ['R3C2','R1C3'];

    var rows = $('tr');

    for(var k = 0; k < rows.length; k++) {
        var currentRow = $(rows[k]);
        var columns = currentRow.find('td');
        var shouldKeepRow = false;  
        for (var i = 0; i < array.length; i++) {
            var removeRowWithCell = array[i];

            // Check if at least one column on this row contains this value
            shouldKeepRow = columns.filter(function() {
                return $(this).text().indexOf(removeRowWithCell) === 0;
            }).length > 0;

            if (shouldKeepRow) {
                break;
            }
        }

        if (!shouldKeepRow) {
            currentRow.remove();
        }
    }
}

答案 1 :(得分:0)

这是因为您首先寻找R3C2并删除所有其他内容,下次您进入循环搜索R1C3时,只有R3C2存在,该内容将被删除

答案 2 :(得分:0)

这是VanillaJS版本。也许这就是您想要的。

let table = document.querySelector("table"),
    tBody = table.tBodies[0];
    
let array = ['R3C2','R1C3'];

Array.from(tBody.rows).forEach(function(row){
let contains = false;
  for(let cell of row.cells){
    if(array.indexOf(cell.innerText) !== -1){
      contains = true;
      break;
    }
  }
  if(!contains){
    row.parentNode.removeChild(row);  
  }
});
<!DOCTYPE html>
<html>
<body>
<table>
	<tbody>
		<tr>
			<td>R1C1</td>
			<td>R1C2</td>
			<td>R1C3</td>
		</tr>
		<tr>
			<td>R2C1</td>
			<td>R2C2</td>
			<td>R2C3</td>
		</tr>
		<tr>
			<td>R3C1</td>
			<td>R3C2</td>
			<td>R3C3</td>
		</tr>
	</tbody>
</table>
</body>
</html>

答案 3 :(得分:0)

使用jQuery.inArray可以更轻松

function doFunction() {
    let array = ['R3C2','R1C3'];
    var rows = $('tr');

    for (var j = 0; j < rows.length; j++) {
        for (var i = 0; i < array.length; i++) {
            var cells = $(rows[j]).children('td').map(function() { return $(this).text(); });     

            if($.inArray(array[i], cells) === -1){
                $(rows[j]).remove();
            }
        }
    }
}