1

行を追加/削除できるテーブルがあります。最初のものを削除すると、行を追加できなくなります。SO、その最初の行が削除されないようにしたいと思います。どうすればそれができますか？

ありがとう

jQuery

$(document).ready(function ($) {
    // trigger event when button is clicked
    $("button.add").click(function () {
        // add new row to table using addTableRow function
        addTableRow($("table"));
        // prevent button redirecting to new page
        return false;
    });

    // function to add a new row to a table by cloning the last row and 
    // incrementing the name and id values by 1 to make them unique
    function addTableRow(table) {
        // clone the last row in the table
        var $tr = $(table).find("tbody tr:last").clone();
        // get the name attribute for the input and select fields
        $tr.find("input,select").attr("name", function () {
            // break the field name and it's number into two parts
            var parts = this.id.match(/(\D+)(\d+)$/);
            // create a unique name for the new field by incrementing
            // the number for the previous field by 1
            return parts[1] + ++parts[2];
            // repeat for id attributes
        }).attr("id", function () {
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1] + ++parts[2];
        });
        // append the new row to the table
        $(table).find("tbody tr:last").after($tr);
        $tr.hide().fadeIn('slow');
        // row count
        rowCount = 0;
        $("#table tr td:first-child").text(function () {
            return ++rowCount;
        });
        // remove rows
        $(".remove_button").on("click", function () {
            $(this).parents("tr").fadeOut('slow', function () {
                $(this).remove();
                rowCount = 0;
                $("#table tr td:first-child").text(function () {
                    return ++rowCount;
                });
            });
        });
    };
});

HTML

<table id="table">
    <thead>
        <tr>
            <th width="8" scope="col">&nbsp;</th>
            <th width="131" scope="col">Roba/Usluga</th>
            <th width="144" scope="col">Jmj</th>
            <th width="144" scope="col">Qty</th>
            <th width="144" scope="col">Price</th>
            <th width="144" scope="col">Rabat</th>
            <th width="81" scope="col">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>
                <select name="sif_roba1" id="sif_roba1">
                    <option value="">Please select</option>
                    <option value="1">David Hasselhoff</option>
                    <option value="2">Michael Jackson</option>
                    <option value="3">Tina Turner</option>
                </select>
            </td>
            <td>
                <select name="idjmj1" id="idjmj1">
                    <option value="">Please select</option>
                    <option value="1">David Hasselhoff</option>
                    <option value="2">Michael Jackson</option>
                    <option value="3">Tina Turner</option>
                </select>
            </td>
            <td>
                <input name="cijena1" id="cijena1">
            </td>
            <td>
                <input name="track1" id="track1">
            </td>
            <td>
                <input name="rabat1" id="rabat1">
            </td>
            <td>
                <button type="button" class="btn remove_button">Remove</button>
            </td>
        </tr>
    </tbody>
</table>
<button type="button" class="add" onClick="clickMe();">Add</button>

デモ http://jsfiddle.net/PBZFw/

4

2 に答える 2

2

行の長さを確認できます。

$(".remove_button").on("click", function () {
    if ( $('#table tbody tr').length === 1 ) return;
    // ...   
});

http://jsfiddle.net/QLQRT/

もう 1 つのオプションは、notメソッドとfirst-childセレクターを使用することです。

$(this).closest("tr").not(':first-child').fadeOut()...

または、CSS を使用して最初の行のボタンを非表示にします。

#table tbody tr:first-child .remove_button { display: none; }
于 2013-03-17T10:15:48.537 に答える