替换jQuery选定的单元格范围？

Question

在下面的代码中，让我们称之为test.htm，加载后我会呈现一个表格：

然后，如果我单击任何标题单元格，则运行一个脚本，使用jQuery选择器＆＃34; #mytable > tbody > tr＆＃34;迭代表行，然后使用链式过滤器， ＆＃34; td:gt(0):lt(2)＆＃34;，在每行中选择一系列td个单元格。因此，如果我们的列已编入索引0,1,2,3,4，则gt(0)将选择1,2,3,4 - 并且已链接的lt(2)将应用于0：1，1：{ {1}}，2：2，3：3，因此只有0：4，1：1将保留，或者根据原始列索引， 2已被选中。

对于这个选择，我想切换一个改变背景颜色的类，但我还想替换两个单元格的内容。我正在努力：

1,2

并且类（独立）的切换有效，但替换不会：

所以，不是用另外两个单元格替换两个单元格 - 我最终会拆分每个单元格，因为$( "td:gt(0):lt(2)", $thisRow ).toggleClass( "viol" ); $( "td:gt(0):lt(2)", $thisRow ).html("<td>AAAAA</td><td>BBBB</td>"); 会应用于集合的每个元素，而且它更改元素的内部 HTML。

因此，假设在一行迭代循环中，我可以访问一系列单元格的替换字符串，如.html()，如何使用此HTML字符串描述的内容替换一系列单元格？需要说明的是，在本例中，我希望结果为：

<td>AAAAA</td><td>BBBB</td>的代码：

test.htm

Answer 1

您可以执行此操作的一种方法是将所需的值存储在array[]上，然后根据数组的顺序将其设置为每个td元素。检查一下：

$('#mytable > tbody > tr').each(function() {
  var txt = ['AAAA','BBBB'],
      count = 0;
  $thisRow = $(this);
  $("td:gt(0):lt(2)", $thisRow).toggleClass("viol");
  $("td:gt(0):lt(2)", $thisRow).each(function(){
    $(this).html(txt[count]);
    count++
  })
});

.a1 {
  border-style: solid;
  border-width: 1px;
  font-size: 1em;
  height: auto;
}
.viol {
  background-color: #DCE0FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="mytable">
  <thead>
    <tr>
      <th>Row h, cell h1</th>
      <th>Row h, cell h2</th>
      <th>Row h, cell h3</th>
      <th>Row h, cell h4</th>
      <th>Row h, cell h5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row d1, cell d1-1</td>
      <td>Row d1, cell d1-2</td>
      <td>Row d1, cell d1-3</td>
      <td>Row d1, cell d1-4</td>
      <td>Row d1, cell d1-5</td>
    </tr>
    <tr>
      <td>Row d2, cell d2-1</td>
      <td>Row d2, cell d2-2</td>
      <td>Row d2, cell d2-3</td>
      <td>Row d2, cell d2-4</td>
      <td>Row d2, cell d2-5</td>
    </tr>
  </tbody>
</table>

Answer 2

看起来你的主要困惑是迭代你的jquery选择器中的每个项目。您需要的是each https://api.jquery.com/each/

each允许您作为参数和索引访问元素，让您完全控制要替换的内容和位置。

$( "td:gt(0):lt(2)", $thisRow ).html("<td>AAAAA</td><td>BBBB</td>");

将替换为

$( "td:gt(0):lt(2)", $thisRow ).each(function (index, element) {
    if (index % 2 === 0) {
        element.html('BBBB');
    }
    else {
        element.html('AAAAA');
    }
});

或类似的东西。