2017-03-10 8 views
-3

htmlテーブルに単一の列を追加したいとします。私のコードは:JavaScriptをテーブルに追加する

$('#addColumn').click(function(){ 
       $('#contentTable').css('width', $('#contentTable').width()+150) 
       $("#contentTable tr:first").append("<td style="+"width:150px"+">Col</td>"); 
       $("#contentTable tr:gt(0)").append("<td style="+"width:150px"+"></td>"); 
      }); 

このスクリプトは、テーブルの最後の列として新しい列を追加します。新しい列を(n-1)列としてどのように追加することができますか?私はABC列のスクリプトがある場合はABDCの新しい列Dを追加する必要があることを意味します。

@UPDATE

enter image description here

前に新機能:

$('#addColumn').click(function(){ 
       $('#contentTable').css('width', $('#contentTable').width()+150) 
       $('#contentTable tr:last').before('<td style="+"width:150px"+">NEW_COLUMN</td>') 
      }); 

結果:

enter image description here

+0

あなたは 'append'をあなたは何を期待していますか?投稿する前にjQuery APIを学んでください。 – vsync

+0

@vsync最も有用な回答ありがとう – littlewombat

+0

心配する必要はありません!そのチップは**金**の価値がある家の上に:)! – vsync

答えて

1
$('#addColumn').click(function(){ 
    $('#contentTable').css('width', $('#contentTable').width()+150); 
    $("#contentTable tr").each(function(ind, el){ 
     if(ind == 0) 
     $(el).find('td:eq(-1)').before('<td style="width:150px">Col</td>'); 
     else 
     $(el).find('td:eq(-1)').before('<td style="width:150px"></td>'); 
    }); 
}); 

これを試してください

+0

それはすべての行にヘッダーを追加する列を追加します – littlewombat

+0

thタグ内の表のヘッダーot tr? –

+0

「th」はテーブルにある、私はそれを変更し、すべてが動作します!どうもありがとうございました – littlewombat

関連する問題