javascript - 防止删除第一行

Question

我有一个表格，我可以在其中添加/删除行。事情是当我删除第一个时，不能再添加任何行。所以，我想防止删除第一行。请问我该怎么做？

谢谢

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/

Answer 1

您可以检查行的长度:

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

http://jsfiddle.net/QLQRT/

另一种选择是使用not 方法和first-child 选择器:

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

或者使用 CSS 隐藏第一行按钮:

#table tbody tr:first-child .remove_button { display: none; }