更改附加元素的属性答案

【问题标题】：change attribute of appended element更改附加元素的属性
【发布时间】：2019-06-02 23:14:02
【问题描述】：

for (var i = 0; i < 10; i++) {
  var tr = $("<tr></tr>")
  tr.append("<td>1</td>");
  tr.append("<td>2</td>");

  $("table tbody").append(tr)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody></tbody>
</table>

如何追加行，然后每隔一行动态更改行跨度。我想要发生的是它如下所示：

<table border='1'>
  <tbody>
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
  </tbody>
</table>

我尝试使用索引，但它没有添加行跨度

感谢任何帮助。

FYI ：我想要发生的是先追加，然后在追加行后更改行跨度

【问题讨论】：

如何选择行为tr:odd？因为您只将rowspan 提供给奇数行。
看来您想要的不仅仅是更改 rowspan... 查看您的预期输出，您似乎想要：每隔奇数行更改 rowspan 并删除每行的第一个 TD连线……

标签： javascript jquery html-table row

【解决方案1】：

刚刚添加mod (%)

for (var i = 0; i < 10; i++) {
  var tr = $("<tr></tr>");
  if(i%2===0){
    tr.append("<td rowspan='2'>1</td>");
  }
  tr.append("<td>2</td>");
  $("table tbody").append(tr)
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <table>
        <tbody></tbody>
    </table>
</body>

</html>

【讨论】：

这是在追加之前更改属性。就像我说的，我想先追加，然后再更改属性

【解决方案2】：

尝试使用 html 字符串，然后将其附加到您的元素并使行跨度动态例如：

    var html_string = '<tr>'
    for (var i = 0; i < 10; i++) {
    html_string+= '<td rowspan="'+i+'">1</td>'
    html_string += '<td>2</td>'
   }
   html_string +='</tr>'
   $("table tbody").append(html_string)

【讨论】：

这是在追加之前更改属性。就像我说的，我想先追加，然后再更改属性

【解决方案3】：

下面的代码可能会有所帮助，

for (var i = 0; i < 10; i++) {
  var tr = $("<tr></tr>");
  tr.append("<td>1</td>");
  tr.append("<td>2</td>");
  $("table tbody").append(tr)
}
$('table tr:odd td:first-child').remove();
$('table tr:even td:first-child').attr('rowspan', 2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
  <tbody></tbody>
</table>

【讨论】：

downvoter：如果输出有任何问题，请提及评论？
我认为您的代码与其他答案相似，顺便说一句，不是反对者。

【解决方案4】：

我希望我能达到你所需要的。

我根据你的第二个 sn-p 得出结果。

for (var i = 0; i < 10; i++) {
  var tr = $("<tr></tr>")
  tr.append("<td>1</td>");
  tr.append("<td>2</td>");

  $("table tbody").append(tr)

}

$('button').click(function(){
$('table tr:odd td:first-child').remove();
 $('table tr:even td:first-child').attr('rowspan', 2);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tbody></tbody>
</table>

<button>append</button>

【讨论】：

我不希望在这种情况下发生另一个事件。我想要的是在附加 tr 之后附加 tr 然后它会改变属性。无点击事件
@guradio Jitendra Rangpariya 的回答怎么样？近了吗？
关闭我想我还在检查
@guradio 好的，请告诉我，你想在循环时进行追加吗？