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

sdbbs 发表于 Dev

sdbbs

在下面的代码中，我们称其为test.htm：加载后，我得到了一个表：

然后，如果我单击任何标题单元格，则会运行一个脚本，该脚本使用jQuery选择器“ #mytable > tbody > tr”在表行上进行迭代，然后使用链接的过滤器“ td:gt(0):lt(2)”td在每一行中选择一个单元格范围。因此，如果我们的列已建立索引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被选中。

对于此选择，我想切换一个更改背景颜色的类，但我也想替换两个单元格的内容。所以我正在尝试：

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

并且类的切换（独立）有效，但是替换不起作用：

因此，而不是用其他两个单元格替换两个单元格-我最终将每个单元格拆分，因为.html()将其应用于集合的每个元素，而且它更改了元素的内部HTML。

因此，假设在一个行迭代循环中，我可以访问替换字符串，例如<td>AAAAA</td><td>BBBB</td>用于一系列单元格，那么如何用此HTML字符串描述的内容替换某个单元格呢？为了清楚起见，在此示例的上下文中，我希望结果为：

的代码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>

丹尼

一种方法是将所需的值存储在上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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-3

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章