※前提条件:本情報は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 [マナ] コメント: |