jquery - Jquery 動的フィールドの生成

Question

次のコードでは、ジョブの詳細の見出しの下に表示するのではなく、追加ボタンと削除ボタンの下にテキストボックスを動的に生成するにはどうすればよいですか。

jsfiddle

HTML:

<table border="0" cellspacing="2">
    <tr>
        <td style="width:200px;" align="right">Name
            <td>
                <input type="text" id="Job Name" value="" />
            </td>
        </td>
    </tr>
    <tr>
        <td align="right">Versions</td>
        <td>
            <select id="version" style="width:350px;">
                <option value="">SELECT</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="right">Test Scripts</td>
        <td>
            <select id="testscripts" style="width:350px;"></select>
        </td>
    </tr>
    <tr>
        <td align="right">datas</td>
        <td>
            <input type="button" id="add" value="Add" onclick="AddTables();" />
            <input type="button" id="del" value="Del" />
        </td>
    </tr>
    <tr>
        <td style="height:3px" colspan="2"></td>
    </tr>
    <tr style="background-color: #383838">
        <td></td>
        <td>
            <input type="button" id="adde" value="New" onclick="clearData();" />&nbsp;&nbsp;
            <input type="button" id="edit" value="Save" onclick="saveToDB();"
            />&nbsp;&nbsp;
            <input type="button" id="delete" value="Delete" onclick="deleteData();"
            />
        </td>
    </tr>
    <tr>
        <td colspan="2">
                <h2>Job Details</h2>

            <div id="navcont" style="width: 880px; height: 5px; margin-left: 0px; margin-top: 0px; list-style: none; float: left;background-color: #383838"></div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <!-- TODO:change this as div, create table inside helper script-->
            <div id="jobsTable"></div>
            </div>
            </div>
        </td>
    </tr>
</table>

JQuery:

$('#add').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length < 7) {
        table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
    }
});
$('#del').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length > 1) {
        table.find('input:text').last().closest('tr').remove();
    }
});

Answer 1

次のテクニックを使用できます

$('#add').click(function () {
    var tr = $(this).closest('tr');
    var table = $(this).closest('table');
    if (table.find('input:text').length < 7) {
        tr.after('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
    }
});

注意してください、ボタンの親を取得し、trそれを参照ポイントとして使用して、テーブルの最後に追加するのではなく、そのすぐ隣に tr を追加しました。

Answer 2

これを試して

var table = $(this).closest('table');
if (table.find('input:text').length < 7) {
    table.find('tr:last').after('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" value="" /> </td></tr>');
}

また、各入力に同じIDを与えるのは正しくないと思います

Answer 3

デモ

このコードを試してください

 $('#add').click(function () {
     var table = $(this).closest('table');
     if (table.find('input:text').length < 7) {
         $('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>').insertAfter($(this).closest('tr'));
     }
 });