jqueryで列に行スパンを追加する

Question

私はajaxで生成されたテーブルを持っています。テーブルが作成された後、特定の列に行スパンを追加したいと思います。私は使用しました

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

しかし結果は正しくないようです。行スパンが追加されても、列の値はこのように結合されます。

A B  C 
1   3 
1 222 3 
1   3 

どうすればこのように変更できますか？ ROWSPANの値は、AJAXによって生成されたデータの数である：

<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を必要に応じて

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のです

ありがとうございました

Answer 1

が期待される結果を達成するために、.eachで使用インデックス（）毎にループ上とするための追加の行を制御するための機能が割り当てROWSPAN外応答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'); 

Commentd以下で使用tesingから検査指標と値を割り当てますポストこの

Codepen URL - http://codepen.io/nagasai/pen/XKjEzj

希望に述べたように応答JSONはあなたのために働く:)

Answer 2

を反復しながら応答オブジェクトの場合、id = 'col_input'で複数のTDを作成しています。

使用：

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

のみID "ROWSPAN" との最初のTDを選択します。

代わりにクラスを使用します。

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