0

HTMLテーブルから行を削除する列を追加できるようにしたい（別名、サイズを変更する）

テーブルは長方形である必要があり、後で 2D 配列の値を表します。

テーブルは何度も更新され、サイズが大きくなる可能性があるため、テーブルを空にして再度埋めるのは良い解決策ではないと思います。

新しいセルに取り掛かる前に、現在持っているセルのサイズを変更し、以前に編集したセルをクリアすることを考えました。

私の問題はサイズ変更にあります。行を繰り返して削除セルを追加し、行を追加して削除することで解決策を考えることができますが、jsまたはjQueryを使用してこの仕事を行うか、少なくとも削除を追加する準備ができているかどうかを尋ねています列？

サンプルテーブル (5x3)

サンプルテーブル (5x3)

<table class="table-editor" id="table1">
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <colgroup class=""></colgroup>
    <tbody>
      <tr class="highlighted-row">
        <td>•&lt;/td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="normal-row">
        <td></td>
        <td>•&lt;/td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="normal-row">
        <td></td>
        <td></td>
        <td>•&lt;/td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>
4

3 に答える 3

3

これが例です。jsFiddle の作業はこちら

ショーを開始するためのボタンをテーブルの下に追加しました。

<input id="addcol" type="button" value="Add Column" />
<input id="remcol" type="button" value="Reomve Column" />
<input id="addrow" type="button" value="Add row" />
<input id="remrow" type="button" value="Remove row" />

jQuery/Javascript:

$(document).ready(function() {

$('#addcol').click(function() {
    var $tablerow = $('table.table-editor').find('tr');
    count = 0;

    $tablerow.each(function(index, value){
        count += 1;
        //alert('Working on row: ' + count);
        var $listitem = $(this);
        //alert('ListItem: ' + $listitem.index());
        n = parseInt($listitem.index());
        //alert('Value of n: ' + n);
        var $newRow = $("<td>" + n + "</td>");
        $("table.table-editor tr:eq(" + n + ")").append($newRow);
    });
});

$('#remcol').click(function() {
    var $tablerow = $('table.table-editor').find('tr');

    $tablerow.each(function(index, value){
        $("table.table-editor tr:eq("+index+") td:eq(-1)").remove();
    });
});

$('#addrow').click(function() {
    $('table.table-editor').append("<tr></tr>");
    $('table.table-editor tr:eq(0) td').each(function(index, value){
        $("table.table-editor tr:eq(-1)").append("<td>"+index+"</td>");
    });
});

$('#remrow').click(function() {
    $('table.table-editor tr:eq(-1)').remove();
});

}); //END $(document).ready()

参照

于 2013-08-20T22:40:12.113 に答える
1

行を削除したい場合は、単に tr タグを削除できます。列を削除したい場合は、もう少し複雑です。たとえば、削除する必要があります。すべての tr タグで最初の td タグ。ただし、jQuery を使用すると、これはそれほど難しくありません。のような eq セレクターを使用して、$('#table1 tr td:eq(0)')最初のすべての td にアクセスし、列を削除できます。

于 2013-08-20T22:40:13.460 に答える