代码之家 › 专栏 › 技术社区 › Sandeep Bhardwaj

获取除列jquery之外的所有行

jquery

Sandeep Bhardwaj · 技术社区 · 6 年前

我使用下面的代码来读取表中的所有行。

现在,我希望在查找所有tr时排除具有类“exclude”的特定a列。

var rows = $("#" + myTableId).find("tr");

3 回复 | 直到 6 年前

Himanshu Tyagi 6 年前

如果你的表结构是我想象的那样,那么你可以这样做:

在行上迭代并创建副本行 exclude 列。

$(function() {
  var rows = [];
  $("#table").clone().find("tr").each(function() {
    var $row = $("<tr>");
    $(this).find("td").not(".exclude").each(function() {
      $row.append($(this));
    });
    rows.push($row);
  });
  console.log(rows);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr><td>1</td><td>11</td><td class="exclude">111</td></tr>
<tr><td>2</td><td class="exclude">22</td><td>222</td></tr>
<tr><td class="exclude">3</td><td>33</td><td>333</td></tr>
</table>

如果需要较短的解决方案:

它有很多与之相关的假设,但我想它应该对你很有用:

$(function() {
  var $table = $("#table").clone();
  $table.find(".exclude").remove();
  var rows = $table.find("tr");
  
  console.log(rows);
});

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<table id=“表”>
<tr><td>1</td><td>11</td><td class=“exclude”>111</td></tr>
<tr><td>2</td><td class=“exclude”>22</td><td>222</td></tr>
<tr><td class=“exclude”>3</td><td>33</td><td>333</td></tr>
</表格>

Adam 6 年前

可以使用jquery的.not()函数( http://api.jquery.com/not/ )要排除匹配元素,请执行以下操作:

$( "tr" ).not( ".exclude" );

这将选择所有 <tr> 没有exclude类的元素。

Peter B 6 年前

如果你不太在乎那些排( <tr> )还有更多的细胞( <td> ,然后您可以将单元格收集到一个简单的2层深度的数组中,如下所示。数组的第一级充当行,下一级包含单元格(与筛选器匹配的单元格)。

优点是您可以访问原始单元格,而不是重复行中的重复单元格,因此如果需要操作单元格(例如更改其内容或css),则可以轻松地进行操作。

var rows = [];
$("#table tr").each(function(index, row) {
  rows.push($(row).find("td").not(".exclude"));
});

// What follows next is just to show the result

for (var i = 0; i < rows.length; i++) {
  console.log("rows[" + i + "] --> " + GetCellInfo(rows[i]));
}

function GetCellInfo(cells) {
  var str = "|";
  for (var i = 0; i < cells.length; i++) {
    str += " " + cells[i].innerText + " |";
  }
  return str;
}

#table td {
  background: #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td>A</td>
    <td>B</td>
    <td class="exclude">XX</td>
  </tr>
  <tr>
    <td>A</td>
    <td class="exclude">XX</td>
    <td>C</td>
  </tr>
  <tr>
    <td class="exclude">XX</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

1 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前