Question

在下面的代码中。如何在下面显示作业详细信息标题下方的add和del按钮下动态生成文本框。

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

您可以为<td align="right">datas</td>提供ID，然后将HTML添加到其中。做格式化你想要显示的方式。

你在任何html元素上使用正确的东西，所以它会附加到你想要的位置。

Answer 2

您可以使用以下技术

$('#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 3

试试这个

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 4

DEMO

试试这段代码

 $('#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'));
     }
 });

Jquery动态字段生成

4 个答案: