Question

我有一个空表，我想根据在同一页面上输入的数据填充。

实施例。用户输入名称，DOB。单击添加。具有Name和DOB列的表具有+1行。并且可以根据用户的选择进行多次添加。

<table width= "100%">
        <tr>
            <th colspan="3">Owners Already Added</th>
        </tr>
        <tr>
            <td>(NAME)</td>
            <td>(DOB)</td>
        </tr>
</table>


<table id="Owner">
        <tr>
            <th colspan="2">Owner</th>
        </tr>
        <tr>
            <td>Name</td>
            <td><input id="txtName" type="text" /></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><input id="txtDOB" type="text" /></td>
        </tr>
</table>

Answer 1

只是为了完成Keith Rousseau的回答（添加了添加新行的代码）：

<table id="displayTable">
    <tr>
        <td>Name</td>
        <td>Date of birth</td>
    </tr>
</table>
<table id="Owner">
    <tr>
        <th colspan="2">
            Owner
        </th>
    </tr>
    <tr>
        <td>
            Name
        </td>
        <td>
            <input id="txtName" type="text" />
        </td>
    </tr>
    <tr>
        <td>
            Date of birth
        </td>
        <td>
            <input id="txtDOB" type="text" />
        </td>
    </tr>
</table>
<button onclick="addNewRow();">Add</button>

<script type="text/javascript">
    function addNewRow() {
        $('#displayTable tr:last').after('<tr><td class="name"></td><td class="dob"></td></tr>');
        var $tr = $('#displayTable tr:last');
        $tr.find('.name').text($('#txtName').val());
        $tr.find('.dob').text($('#txtDOB').val());
    }
</script>

Answer 2

在第一个表格中，添加ID为“DisplayTable”并将列更改为分别为class =“name”和class =“dob”。

执行此操作的jquery如下：

var $tr = $('#DisplayTable tr:last');
$tr.find('.name').text($('#txtName').val());
$tr.find('.dob').text($('#txtDOB').val());

Answer 3

JQuery可能是你的朋友。请参阅此question，因为它类似于您要执行的操作。

您可能还需要向服务器发帖以保留您的数据。看到 jQuery post寻求帮助

Answer 4

好吧，因为它是jQuery和各种各样的表，你可能会看一个插件，例如我们用过的jqGrid。

请参阅此处的链接：jqGrid

他们有一些例子可以在表中内联或在模态对话框中执行你所描述的内容，这里有很多选项。

如何填充表格？

4 个答案: