0

データの行を編集できる Web ページがあります。一部を編集したり、一部を削除したり、「すべて保存」ボタンをクリックしたりすると、すべてうまくいきます。

新しい「空で編集の準備ができている」行を追加できるようになりました。

行を削除する方法を学んだとき、入力の名前 (例: ) を適切にインデックス付けすることの重要性を理解しましたname="[0].Price"。

行の追加のためにそれらを処理するための好ましい/最良の方法は何だろうか。

この質問はすでに尋ねられているに違いないと確信していますが、答えを見つけることができませんでした (グーグルで検索したキーワードの選択が不十分でしたか?)。

<form action="/en-GB/MemberField" id="ca4b358f-0510-42a1-9d5f-4480451769ac" method="post"><input name="__RequestVerificationToken" type="hidden" value="Jbczos1wMnFXNCvqZeiExYDIK1EZa8gqA_zI9e8Ajd0ykpMxgl9S4telkqGLJVfpucIgJNd7yqoBGLnHccBizDbraQ5ucdWu-_akJhM857Y1" />    <table class="table">
        <tr>
            <th>
                System?
            </th>
            <th>
                Virtual?
            </th>
            <th>
                Name
            </th>
            <th></th>
        </tr>

        <tr>
    <td>
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
    </td>
    <td>
        <input checked="checked" class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[0].IsVirtual" type="checkbox" value="true" /><input name="[0].IsVirtual" type="hidden" value="false" />
    </td>
    <td>
        <input data-indexed="true" name="[0].Name" type="text" value="test 1" />
    </td>
    <td>
        <input type="button" value="delete" data-code="delete" />
    </td>
</tr>
<tr>
    <td>
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
    </td>
    <td>
        <input checked="checked" class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[1].IsVirtual" type="checkbox" value="true" /><input name="[1].IsVirtual" type="hidden" value="false" />
    </td>
    <td>
        <input data-indexed="true" name="[1].Name" type="text" value="test 2" />
    </td>
    <td>
        <input type="button" value="delete" data-code="delete" />
    </td>
</tr>
<tr>
    <td>
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
    </td>
    <td>
        <input checked="checked" class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[2].IsVirtual" type="checkbox" value="true" /><input name="[2].IsVirtual" type="hidden" value="false" />
    </td>
    <td>
        <input data-indexed="true" name="[2].Name" type="text" value="test 5" />
    </td>
    <td>
        <input type="button" value="delete" data-code="delete" />
    </td>
</tr>
<tr>
    <td>
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
    </td>
    <td>
        <input class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[3].IsVirtual" type="checkbox" value="true" /><input name="[3].IsVirtual" type="hidden" value="false" />
    </td>
    <td>
        <input data-indexed="true" name="[3].Name" type="text" value="test 3" />
    </td>
    <td>
        <input type="button" value="delete" data-code="delete" />
    </td>
</tr>
<tr>
    <td>
        <input class="check-box" disabled="disabled" type="checkbox" />
    </td>
    <td>
        <input class="check-box" data-val="true" data-val-required="The Virtual? field is required." name="[4].IsVirtual" type="checkbox" value="true" /><input name="[4].IsVirtual" type="hidden" value="false" />
    </td>
    <td>
        <input data-indexed="true" name="[4].Name" type="text" value="test 4" />
    </td>
    <td>
        <input type="button" value="delete" data-code="delete" />
    </td>
</tr>


    </table>
    <input type="submit" value="save"/>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        var form = $('#ca4b358f-0510-42a1-9d5f-4480451769ac');

        form.find('[data-code="delete"]').click(function (evt) {
            var row = $(evt.target).closest('TR');

            row.remove();
        });

        form.bind('submit', function (evt) {
            // Code that handle indexing...
        });
    });
</script>
4

1 に答える 1

1

私にとってうまくいくのは、JavaScript関数を使用して新しい行を追加することです。モデルのインデックスを 0,1,2,3 のように連続させておく必要があります。このようなものです。

var iRowCnt = '@Model.Count()';

function AddRow()
{
  //Add your html fields using iRowCnt as the index
  var myRow = '<tr>'
    + '<td>'<input name="[' + iRowCnt + '].Name" type="text" value="" /></td>'
    + '</tr>';
  $('#divSection').append(myRow);
  iRowCnt++;
}

また、私の例を使用するには、jquery ライブラリにリンクする必要があります。

于 2013-10-29T15:48:38.553 に答える