5

jQueryで行を動的に追加および削除するhtmlテーブルがあります。行数は、ユーザーが最大 4 行を追加できる jQuery カウンターによって制限されます。私の問題は、ユーザーが 4 番目の行を作成すると制限に達しましたが、行を削除しても制限が残り、それ以上行を追加できないことです。

http://jsfiddle.net/nallad1985/sqrrt/

HTML

<table id="myTable" class="order-list">
<thead>
    <tr>
        <td>Name</td>
        <td>Price</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type="text" name="name" />
        </td>
        <td>
            <input type="text" name="price1" />
        </td>
        <td><a class="deleteRow"></a>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="5" style="text-align: left;">
            <input type="button" id="addrow" value="Add Row" />
        </td>
    </tr>
    <tr>
        <td colspan="">Grand Total: $<span id="grandtotal"></span>

        </td>
    </tr>
</tfoot>

Jクエリ

$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
    var counter = $('#myTable tr').length - 2;
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" name="price' + counter + '"/></td>';

    cols += '<td><input type="button" id="ibtnDel"  value="Delete"></td>';
    newRow.append(cols);
    if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("change", 'input[name^="price"]', function (event) {
    calculateRow($(this).closest("tr"));
    calculateGrandTotal();
});

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
});

});

function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
    grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
4

4 に答える 4

8

たくさんの修正、

  1. 削除ボタンの余分なハンドラを削除
  2. ID を複製してはならないため、ボタン ID をクラスに変更します。ID を複製してはいけない理由をお読みください。
  3. [行の追加] ボタンを有効にするロジックが追加されました。固定フィドルを参照してください。
  4. Add Row ハンドラー内の var 宣言を削除して、グローバル var を更新しました。

http://jsfiddle.net/sqrrt/2/

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
});
于 2013-04-24T19:09:02.050 に答える
2

ボタンを再度有効にして、行を削除するときにカウンターを減らすだけです。

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter--;
    $('#addrow').prop('disabled', false).prop('value', "Add row");
});
于 2013-04-24T19:06:51.477 に答える
2

削除ボタンをクリックすると、カウンター番号を減らし、ボタンとプロパティ値を有効にする必要があります

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter = counter-1;
    $("#addrow").attr("disabled", false).prop("value", "Add Row")

});
于 2013-04-24T19:18:38.250 に答える
2

私はあなたのJavaScriptを更新しましたフィドルのコードを見てください：

http://jsfiddle.net/sqrrt/3/

$("table.order-list").on("click", "#ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter --;
    if (counter < 5) $('#addrow').attr("disabled", false).prop('value', "Add Row");
});

問題は、カウンターを適切にカウントダウンせず、削除ボタンのメソッドが呼び出されなかったことです。

于 2013-04-24T19:38:38.820 に答える