使用jquery将rowspan添加到列中

时间:2016-06-20 05:00:56

标签: jquery html ajax html5

我有一个由ajax生成的表。创建表后,我想在特定列中添加rowspan。我已经使用了

$('#col_input').attr('rowspan', '2');

但结果似乎不对。即使添加了rowspan,列的值也会这样组合。

A   B     C
1         3
1   222   3
1         3

我怎样才能像这样改变它。

A   B     C
1         3
1   2     3
1         3

这是我生成表格的ajax成功脚本

success: function(response)
{
    var tableData,t1,t2,t3;

    $.each(response, function(index, data) {

        t1  = "<tr><td>1</td>";
        t2  = "<td id='col_input'><input type='text' id='val_a' value='2' /></td>";
        t3  = "<td>3</td></tr>";

        tableData += t1+t2+t3;
        $('#tbl_add tbody tr').remove();
        $('#tbl_add tbody').append(tableData);
    });

     $('#col_input').attr('rowspan', '2'); 
}

和我的html如果需要

<table id="tbl_add">
    <thead>
        <tr>
            <td><strong>A</strong></td>
            <td><strong>B</strong></td>
            <td><strong>C</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
    </table>

nb:rowspan的值是ajax生成的数据的数量

感谢您的帮助

2 个答案:

答案 0 :(得分:0)

要实现预期的结果,请使用.each()函数中的索引来控制每个循环上的附加行,并在响应json下使用测试

 response = [{
   "val_a": "1",
   "rowspan":"2"
 }, {
   "val_a": "2"
 }]
 var tableData, t1, t2, t3;

 $.each(response, function(index, data) {

   t1 = "<tr><td>1</td>";
   if (index == 0) {
console.log(data.rowspan)
     t2 = "<td id='col_input' rowspan='"+data.rowspan+"'><input type='text' id='val_a' value='2' /></td>";
   }
   t3 = "<td>3</td></tr>";
   if (index == 0) {
     tableData += t1 + t2 + t3;
   } else {
     tableData += t1 + t3;
   }
   $('#tbl_add tbody tr').remove();
   $('#tbl_add tbody').append(tableData);
 });

 //$('#col_input').attr('rowspan', '2');

如帖子中所述

,评论了从响应JSON中分配rowspan和分配的检查索引和值

Codepen网址 - http://codepen.io/nagasai/pen/XKjEzj

希望这适合你:)

答案 1 :(得分:0)

在迭代响应对象时,您正在使用 id ='col_input'创建多个TD。

使用:

$('#col_input').attr('rowspan', '2');

只会选择ID为“rowspan”的第一个TD。

改为使用类,例如

$('.col_input').attr('rowspan', '2');