28

現在動的に行を追加しているテーブルがあります: http://jsfiddle.net/fmuW6/5/

ここで、ボタンをクリックしてテーブルに新しい列を追加したいと思います。ユーザーはテキストボックスに列ヘッダーを入力します。

どうすればこれを達成できますか？ユーザーが 4 つの行を追加する場合、Add a new Columnボタンは既存のすべての行を処理する必要があります (各行にチェックボックスを追加します)。

アップデート

行レベルで列名とチェックボックスを追加しようとしています。

そのため、ユーザーが列名を入力するテキスト ボックスを追加しました: http://jsfiddle.net/fmuW6/10/

<input type=text placeholder='columnname'/>
<button type="button" id="btnAddCol">Add new column</button></br></br>

そのため、ユーザーがボタンをクリックすると、列名はテキストボックスの値になり、行レベルではチェックボックスになります。したがって、基本的には、最初の行を除くテーブルのすべてに新しい列を追加する必要がありますtr。これは列名であるためです。

4

6 に答える 6

21

フィドルを更新して、それを行う方法の小さな例を示しました。

jsFiddle-リンク

var myform = $('#myform'),
    iter = 0;

$('#btnAddCol').click(function () {
     myform.find('tr').each(function(){
         var trow = $(this);
         if(trow.index() === 0){
             trow.append('<td>Col+'iter+'</td>');
         }else{
             trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
         }
     });
     iter += 1;
});

これにより、最初の行に名前として適用されるカウント変数と、次の行のチェックボックスの名前属性に適用されるカウント変数を含む、すべての行に新しい列が追加されます。

テーブルヘッダーに - 要素を使用することを検討してthください。そうすれば、私が作成しているインデックスチェックが不要になり、意味的により正確になります。

ユーザーが列の名前を入力する部分を省略しましたが、ご覧のとおりiter、最後に値を - に置き換えるだけで済みます。

于 2013-02-19T18:14:17.270 に答える
4

答えはうまくいきますが、それでもここに、theadとtbodyを使用する別の方法があります！

JS

$('#irow').click(function(){
if($('#row').val()){
    $('#mtable tbody').append($("#mtable tbody tr:last").clone());
    $('#mtable tbody tr:last :checkbox').attr('checked',false);
    $('#mtable tbody tr:last td:first').html($('#row').val());
}
});
$('#icol').click(function(){
if($('#col').val()){
    $('#mtable tr').append($("<td>"));
    $('#mtable thead tr>td:last').html($('#col').val());
    $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
}
});
于 2013-02-19T18:42:17.287 に答える
3

新しい列を追加するには、次のコードを使用します。

$('#btnAddCol').click(function () {
    $("tr").append("<td>New Column</td>");
});

ただし、テキストなどを含む最初の行の値を変更して、を含める必要があります<input type="checkbox" />。そしてそれはより良いです

于 2013-02-19T18:02:35.733 に答える
2

それをチェックして ください 

 $(document).ready(function () {
        $('#btnAdd').click(function () {
              var count = 3, first_row = $('#Row2');
                while(count-- > 0)                    first_row.clone().appendTo('#blacklistgrid');
     });   

        $('#btnAddCol').click(function () {
            $("#blacklistgrid tr").each(function(){
               $(this).append("<td>test</td>");       
            })
     });      
 });
于 2013-02-19T18:08:22.540 に答える