0

在下面的代码中，我如何在作业详细信息标题下方显示的添加和删除按钮下方动态生成文本框。

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>

查询：

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

4 回答 4

1

演示

试试这个代码

 $('#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'));
     }
 });
于 2013-08-29T08:15:36.393 回答
1

您可以将 ID 提供给它，<td align="right">datas</td>然后将 HTML 附加到它。根据您想要的显示方式进行格式化。

问题是您在任何 html 元素上正确使用附加，因此它附加到您想要的位置。

于 2013-08-29T08:07:43.957 回答
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 添加到它旁边，而不是添加到表的末尾。

于 2013-08-29T08:10:30.043 回答
1

尝试这个

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是不对的

于 2013-08-29T08:11:05.707 回答