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

Question

In the code below, let's call it test.htm , upon load I get rendered a table: 在下面的代码中，我们将其称为test.htm ，在加载时我会呈现一个表：

Then, if I click on any of the header cells, a script runs that iterates over the table rows with the jQuery selector " #mytable > tbody > tr ", and then it uses a chained filter, " td:gt(0):lt(2) ", to select a range of td cells in each row. 然后，如果我单击任何标题单元格，则运行一个脚本，使用jQuery选择器“ #mytable > tbody > tr ” #mytable > tbody > tr行，然后使用链式过滤器“ td:gt(0):lt(2) “，选择每行中的td单元格范围。 So, if our columns are indexed 0,1,2,3,4 , then gt(0) will select 1,2,3,4 - and the chained lt(2) will be applied to 0: 1 ,1: 2 ,2: 3 ,3: 4 , and so only 0: 1 ,1: 2 will remain, or in terms of original column indexes, 1,2 are selected. 所以，如果我们的列索引0,1,2,3,4 ，然后gt(0)将选择1,2,3,4 -和链lt(2)将被应用到0： 1 ，1： 2 ，2： 3 ，3： 4 ，所以只有0： 1 ，1： 2将保持，或在原始列索引而言， 1,2被选中。

To this selection, I want to toggle a class that changes background color, but I would also like to replace the content of the two cells. 对于这个选择，我想切换一个改变背景颜色的类，但我也想替换两个单元格的内容。 So I'm trying: 所以我在尝试：

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

and the toggling of the class (standalone) works, but the replacement doesn't: 并且类（独立）的切换有效，但替换不起作用：

So, instead of replacing the two cells with two other cells - I end up splitting each of the cells, because .html() gets applied to each element of the collection, and furthermore it changes the inner HTML of the element. 因此，不是用另外两个单元格替换两个单元格 - 我最终会拆分每个单元格，因为.html()会应用于集合的每个元素，而且它会更改元素的内部 HTML。

So, assuming in a row iteration loop, I have access to replacement strings like <td>AAAAA</td><td>BBBB</td> for a range of cells, how can I replace a range of cells with the content described by this HTML string? 因此，假设在一行迭代循环中，我可以访问替换字符串，如<td>AAAAA</td><td>BBBB</td>一系列单元格，如何用所描述的内容替换一系列单元格通过这个HTML字符串？ To be clear, in the context of this example I'd want the result to be: 要清楚，在这个例子的上下文中我希望结果是：

The code for test.htm : test.htm的代码：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!-- <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <style type="text/css">
.a1 {
  border-style: solid;
  border-width: 1px;
  font-size: 1em;
  height:auto;
}
.viol { background-color: #DCE0FF; }
  </style>
  <script type="text/javascript">
function TableHeadListener(inevobj) {
  console.log("TableHeadListener", inevobj);
  ToggleTdRangeClass();
}
function ToggleTdRangeClass() {
  $('#mytable > tbody > tr').each(function() {
    $thisRow = $(this);
    $( "td:gt(0):lt(2)", $thisRow ).toggleClass( "viol" );
    $( "td:gt(0):lt(2)", $thisRow ).html("<td>AAAAA</td><td>BBBB</td>"); // AAA/BBB becomes html of each matched cell individually;!
  });
}
createTable = function() {
  var htmlTblString = '<table border="1" id="mytable">\n\
    <thead>\n\
      <tr>\n\
        <th>Row h, cell h1</th>\n\
        <th>Row h, cell h2</th>\n\
        <th>Row h, cell h3</th>\n\
        <th>Row h, cell h4</th>\n\
        <th>Row h, cell h5</th>\n\
      </tr>\n\
    </thead>\n\
    <tbody>\n\
      <tr>\n\
        <td>Row d1, cell d1-1</td>\n\
        <td>Row d1, cell d1-2</td>\n\
        <td>Row d1, cell d1-3</td>\n\
        <td>Row d1, cell d1-4</td>\n\
        <td>Row d1, cell d1-5</td>\n\
      </tr>\n\
      <tr>\n\
        <td>Row d2, cell d2-1</td>\n\
        <td>Row d2, cell d2-2</td>\n\
        <td>Row d2, cell d2-3</td>\n\
        <td>Row d2, cell d2-4</td>\n\
        <td>Row d2, cell d2-5</td>\n\
      </tr>\n\
    </tbody>\n\
  </table>\n';
  $("#content").html(htmlTblString);
  // add events:
  var mtb = $("#mytable");
  mtb.find('th').each(function() { $(this).on('click', null, this, TableHeadListener); });
}

ondocready = function() {
  createTable();
}
$(document).ready(ondocready);
  </script>
</head>

<body>
  <h1>Hello World!</h1>

  <div id="content" class="a1"></div>

</body>
</html>

Answer 1

One way you can do this is store the values you want on an array[] and then set it to each td element based on the order of the array. 一种方法是将所需的值存储在array[] ，然后根据数组的顺序将其设置为每个td元素。 Check this: 检查一下：

 $('#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

It looks like your major confusion is with iterating over each item in your jquery selector. 看起来你的主要困惑是迭代你的jquery选择器中的每个项目。 What you need is each https://api.jquery.com/each/ 你需要的是each https://api.jquery.com/each/

each allows allows you to access the element both as a paremeter and by index, giving you complete control of what content you'd like to replace and where. each允许允许您作为参数和索引访问元素，使您可以完全控制要替换的内容和位置。

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

would be replaced with 将被取代

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

or something similar. 或类似的东西。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-07-08 14:13:43

解决方案2
1 2016-07-08 14:14:30

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-07-08 14:13:43

解决方案2 1 2016-07-08 14:14:30

解决方案1
2 已采纳 2016-07-08 14:13:43

解决方案2
1 2016-07-08 14:14:30