Question

我有一个有几行的表。

<table width="100%" border="0">
  <tr>
    <td data-r1="123">val 1</td>
    <td data-r1="332">val 2</td>
    <td data-r1="144">val 3</td>
    <td data-r1="654">val 4</td>
    <td data-r1="443">val 5</td>
    <td data-r1="448"> val 6</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3" data-r1="aaa">row 3 val 1</td>
    <td data-r1="ddd">row 3 val 2</td>
    <td colspan="2" data-r1="ggg">row 3 val 3</td>
  </tr>
</table>

我需要组合第一行和最后一行的数据属性中的值，并将其放入每列中第2行的td。

现在，很容易从第1行获取值，因为单元格对齐。

$('tr:nth-child(2) td').each(function () {
        var r2cel = $(this).index(),
            r1val = $('tr:first td').eq(r2cel).data(r1),
            r3val = ???;

        $(this).text(r1val + ', ' + r3val);
 });

如何从单元格可以拥有colspan的行中获取值＆gt; 1？

我正在寻找的最终结果将如下所示：

<table width="100%" border="0">
  <tr>
    <td data-r1="123">val 1</td>
    <td data-r1="332">val 2</td>
    <td data-r1="144">val 3</td>
    <td data-r1="654">val 4</td>
    <td data-r1="443">val 5</td>
    <td data-r1="448"> val 6</td>
  </tr>
  <tr>
    <td>123, aaa</td>
    <td>332, aaa</td>
    <td>144, aaa</td>
    <td>654, ddd</td>
    <td>443, ggg</td>
    <td>448, ggg</td>
  </tr>
  <tr>
    <td colspan="3" data-r1="aaa">row 3 val 1</td>
    <td data-r1="ddd">row 3 val 2</td>
    <td colspan="2" data-r1="ggg">row 3 val 3</td>
  </tr>
</table>

Answer 1

这是一个代码片段，可以满足您的需求！

您可以看到需要使用jQuery获取data-r1属性的值，并将它们组合在一起以使用适当的值填充第二行。

对于第三行，我必须做一些特殊的处理来处理colspan属性的存在，所以你需要特别注意那个部分。

// All rows
var rows = $('table tr');
//console.log('rows:' + rows.length);

// Row 1
var r1tds = $(rows[0]).find('td');
//console.log('cells:' + r1tds.length);

// Row 2
var r2tds = $(rows[1]).find('td');

// Row 3
var r3tds = $(rows[2]).find('td');

// Get data values from row 3
var r3cellValues = [];
for (x = 0; x < r3tds.length; x++) {
  var colspan = $(r3tds[x]).attr('colspan');
  if (colspan !== undefined) {
    for (y = 0; y < colspan; y++) {
      r3cellValues.push($(r3tds[x]).attr('data-r1'));
    }
  } else {
    r3cellValues.push($(r3tds[x]).attr('data-r1'));
  }
}
//console.log(r3cellValues.length);

// Update the html of row 2 with combined values.
for (x = 0; x < 6; x++) {
  //console.log($(r1tds[x]).attr('data-r1') + ' ' + r3cellValues[x]);
  $(r2tds[x]).html($(r1tds[x]).attr('data-r1') + ' ' + r3cellValues[x]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="1">
  <tr>
    <td data-r1="123">val 1</td>
    <td data-r1="332">val 2</td>
    <td data-r1="144">val 3</td>
    <td data-r1="654">val 4</td>
    <td data-r1="443">val 5</td>
    <td data-r1="448">val 6</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3" data-r1="aaa">row 3 val 1</td>
    <td data-r1="ddd">row 3 val 2</td>
    <td colspan="2" data-r1="ggg">row 3 val 3</td>
  </tr>
</table>

Answer 2

您可以使用.filter() jquery方法来过滤colspan属性大于1的结果。

$('td').filter(function() {
    return $(this).attr("colspan") > 1;
})

jQuery: Selecting all elements where attribute is greater than a value

获取另一行中的表格单元格的值

2 个答案: