表行中的循环不一致

for loop inconsistency in table rows

本文关键字：循环 不一致      更新时间：2023-09-26

//Iterate through stuff with for loop method
//http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript
var omitTD = $('.ColHead').closest('tr').find('td:eq(0), td:eq(1)'), headerTD = $('.ColHead').closest('tr').find('td').not(omitTD);
  ;
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {
    headerTD.eq(j).css("background-color", "#ACE");
  }
}
headerTD.text('Target This');
omitTD.text('Dont Target');
table {
  border-collapse: collapse;
}
td,
tr {
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="mytab1">
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td class="mrGridQuestionText" style=""></td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <div class="ColHead"></div>
        <center>
          <span class="mrQuestionText" style=""><div class="ColHead"></div>Carrier
                                
                        <br>
            Selection/
                                
                            <br>
            Negotiation
                            
                            </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Order
                                
                                <br>
            Fulfillment
                            
                                </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Transportation
                                
                                    <br>
            Distribution
                            
                                    </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Inventory
                                
                                        <br>
            Management
                            
                                        </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Logistics
                                
                                            <br>
            Information
                                
                                                <br>
            Systems
                            
                                                </span>
        </center>
      </td>
    </tr>
    <tr>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">Have Used</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td class="mrGridQuestionText" style=""></td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <div class="ColHead"></div>
        <center>
          <span class="mrQuestionText" style=""><div class="ColHead"></div>Carrier
                                
                                                    <br>
            Selection/
                                
                                                        <br>
            Negotiation
                            
                                                        </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Order
                                
                                                            <br>
            Fulfillment
                            
                                                            </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Transportation
                                
                                                                <br>
            Distribution
                            
                                                                </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Inventory
                                
                                                                    <br>
            Management
                            
                                                                    </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Logistics
                                
                                                                        <br>
            Information
                                
                                                                            <br>
            Systems
                            
                                                                            </span>
        </center>
      </td>
    </tr>
    <tr>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">Have Used</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
    </tr>
  </tbody>
</table>

为什么代码段中的JavaScript代码有效，但以下代码无效：

//Iterate through stuff with for loop method
//http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript
var headerTD = $('.ColHead').closest('tr').find('td').not('td:eq(0), td:eq(1)'),
  omitTD = $('.ColHead').closest('tr').find('td:eq(0), td:eq(1)');
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {
    headerTD.eq(j).css("background-color", "#ACE");
  }
}
headerTD.text('Target This');
omitTD.text('Dont Target');

目标只是简单地将一些css应用于某些单元格，并使用for循环排除前两个单元格。请注意，我故意不使用.each()，它的代码要短得多，但性能稍慢。

代码不太清楚，但似乎您想设置第一行表中单元格的背景色，跳过前两列，是吗？

如果是这样的话，那么你就可以使用CSS了。

tr:first-of-type td:nth-child(n+3) {
  background-color: #ace;
}

如果第一行实际上是标题行，那么使用<thead>和<th>将使CSS和HTML更加清晰：

<table>
  <thead>
    <tr>
      <th>foo</th>
      <th>bar</th>
      <th>baz</th>
    </tr>
  </thead>
  <tbody> ...etc </tbody>
</table>

th:nth-child(n+3) {
  background-color: #ace;
}
相关文章：