更改附加元素的属性
[英]change attribute of appended element
问题描述
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>
How Can I append rows and then dynamically change the rowspan of every second row. 
如何追加行，然后动态更改每第二行的行跨度。 What I want to happend is it will look like below: 我想发生的事情将如下所示：
<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>
我尝试使用索引，但未添加行跨度
Any help is appreciated. 任何帮助表示赞赏。
FYI : What I want to happened is append first then change the row span after the row is appended FYI ：我想发生的是先附加，然后在附加行后更改行跨度
4 个解决方案
解决方案1
1 2019-01-08 10:13:29
Just added mod (%) 刚刚添加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
0 2019-01-08 09:43:37
I hope I achieve what you need. 希望我能达到您的要求。
I base the result from your second snippet. 我根据第二个片段的结果。
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>
解决方案3
0 2019-01-08 10:14:31
try to use html string and then attach it to your element and make the rowspan dynamic for example : 尝试使用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)
解决方案4
-1 2019-01-08 09:55:02
Below code may help, 下面的代码可能会有所帮助，
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.