JQuery

※前提条件:本情報はjQuery 2.1を基づいて説明してる

HTML

<table id="lanTable">

    <thead>
        <tr>
            <th>名前</th>
            <th>選択</th>
            <th>削除</th>
        </tr>
    </thead>

    <tbody>
        <tr>
           <td style="text-align: left"><input type="text" id="tName" name="tName" value="" /></td>
           <td style="text-align: left"><select id="tSelect" name="tSelect" class="changeList"><option>A</option><option>B</option><option>C</option></select></td>
           <td></td>
        </tr>

    </tbody>
</table>

<input type="hidden" name="row_length" value="1" />

<table style="width: 100%;">
    <tr>
        <td>
            <input id="insertLanuge" style="" type="button" value="insert" />
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: right">
            <asp:Button ID="btnRegist" runat="server" OnClick="Button1_Click" Text="登録" />
        </td>
    </tr>

</table>

jQueryコード

$(document).ready(function () {
    // 行を追加する
    $("#insertLanuge").click(function () {

        var tr_row = '' +
         '<tr>' +
           '<td style="text-align: left"><input type="text" id="tName" name="tName" value="" /></td>' +
           '<td><select id="tSelect" name="tSelect" class="changeList"><option>A</option><option>B</option><option>C</option></select></td>' +
           '<td><button class="deleteLanuge" onClick="$(this).parent().parent().remove();">Del</button></td>' +
         '</tr>';// 挿入する行のテンプレート
        var row_cnt = $("#lanTable tbody").children().length;// 現在のDOMで表示されているtrの数
        $(':hidden[name="row_length"]').val(parseInt(row_cnt) + 1);// input type=hiddenに格納されている行数を変更
        $(tr_row).appendTo($('#lanTable > tbody'));// tbody末尾にテンプレートを挿入

        $('#lanTable > tbody > tr:last > td > input').each(function () {
            var base_name = $(this).attr('name');
            $(this).attr('name', base_name + '[' + row_cnt + ']');
        });// input name部分を変更
        $('#lanTable > tbody > tr:last > td > select').each(function () {
            var base_name = $(this).attr('name');
            $(this).attr('name', base_name + '[' + row_cnt + ']');
        });// input name部分を変更
    });
});


ウィジェット型CM動画配信サービス manna [マナ]

コメント:



(画像の文字列を入力して下さい)

トップ   編集 凍結 差分 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019/12/02 (月) 12:45:16 (1628d)

yVoC[UNLIMITȂ1~] ECirŃ|C Yahoo yV LINEf[^[Ōz500~`I


z[y[W ̃NWbgJ[h COiq 萔O~ył񂫁z COsیI COze