Jquery：选择直到第n行的第n个td

时间：2017-11-20 18:28:27

标签： jquery

我想更改表格中所有行的背景颜色，但只能更改每行的第td行。

以下是我正在使用的代码：

var rowCount = $('#t tr').length;
$('#t > tbody > tr').each(function() {
  for (var i = 0; i < 5; i++) {
    $('td').eq(i).css("background", "#ff0000");
  }
});

此处t是表格的id。我得到的结果是只有第一行变色。

enter image description here

在这种情况下我们如何处理rowspan？

这是我的HTML代码：

<table class="table table-bordered" id="t">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th>P1</th>
        <th>P2</th>
        <th>P3</th>
        <th>P4</th>
        <th>P5</th>
        <th>P6</th>
        <th>P7</th>
        <th>P8</th>
        <th>P9</th>
        <th>P10</th>
        <th>P11</th>
        <th>P12</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-sm-1"></td>
        <td class="col-sm-1">
                        Rebuy IT
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>

      </tr>
      <tr>
        <td class="col-sm-1"></td>
        <td class="col-sm-1">
                        Rebuy DC
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>

      </tr>
      <tr>
        <td class="col-sm-1"></td>
        <td class="col-sm-1">
                        CO DC/IT
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>

      </tr>
      <tr>
        <td class="col-sm-1"></td>
         <td class="col-sm-1">
                       Store Inv On Hand
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>

      </tr>
      <tr>
        <td class="col-sm-1"></td>
         <td class="col-sm-1">
                       Store Inv In Transit
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>

      </tr>
      <tr>
        <td class="col-sm-1" rowspan="2">
                       EPR
                    </td>
         <td class="col-sm-1">
                       EPR Shpmts to value
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>

      </tr>
      <tr>

         <td class="col-sm-1">
                       EPR Shpmts to NFS
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>
         <td class="col-sm-1">
                        <input class="col-sm-12"  />
                    </td>

      </tr>
    </tbody>
  </table>

2 个答案:

答案 0 :(得分：2)

您可以使用jQuery＆＃39; :lt(n) selector 来避免循环：

  

：lt（）选择器

     

选择匹配集内索引小于索引的所有元素。

＆＃13;
＆＃13; 
var n = 3;
$("tr").find("td:lt(" + n + ")").css("background-color", "red");
＆＃13; 
table {
  border-collapse: collapse;
}

td {
  margin: 0;
  border: 1px solid black;
  padding: 10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

编辑：鉴于您的编辑，其中包含行扫描，您可能需要更进一步，然后使用循环。这是一个可能适合您的解决方案。它只处理2的rowpans，但我会改进它以适用于任何大小的rowpans。

$("tr").each(function() {
    var n = 5;
    var $row = $(this);
    var $prevRow = $(this).prev("tr");
    var rowspan = $prevRow.find("td[rowspan]").length;
    n = n-rowspan;
    $row.find("td:lt(" + n + ")").css("background-color","red");
});

编辑2 ：能够在开头排除列... 

var columnsToHighlight = 5;
var columnsToExclude = 2;

$("tr").each(function() {
    var n = columnsToHighlight;
    var $row = $(this);
    var $prevRow = $(this).prev("tr");
    var rowspan = $prevRow.find("td[rowspan]").length;
    n = n-rowspan;
    var gt = n - (columnsToHighlight-(columnsToExclude -1));
    $row.find("td:lt(" + n + "):gt(" + gt + ")").css("background-color","red");
});

答案 1 :(得分：1)

此处的问题是<td>选择器是通用的，而不是来自<tr>：

var rowCount = $('#t tr').length;
$('#t > tbody > tr').each(function() {
  for (var i = 0; i < 5; i++) {
    // Change here:
    $(this).find('td').eq(i).css("background", "#ff0000");
  }
});

这里，$(this).find('td')是提示。 <td>不会作为整体查找，而只会在当前<tr>内查找。在您以前的情况下，它只会着色或绘制整个文档的前4 <td>个。

从Santi's Answer获取灵感，您也可以尝试使用less than selector避免for循环：

$("#t tr").find("td:lt(3)").css("background", "red");
相关问题
最新问题