如何填充表格？答案

【问题标题】：How do I populate a table?如何填充表格？
【发布时间】：2011-01-22 20:46:53
【问题描述】：

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

示例。用户输入姓名、出生日期。单击添加。具有名称和 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>

【问题讨论】：

您想在任何存储中存储数据吗？你可能想要，因为否则它没有多大意义。

标签： jquery html-table

【解决方案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>

【讨论】：

【解决方案2】：

在第一个表中，添加 'DisplayTable' 的 id 并将列更改为分别具有 class="name" 和 class="dob"。

执行此操作的 jquery 如下：

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

【讨论】：

这就是我想做的。这个答案是不是有点不对劲，还是我应该继续看看我能做什么？
你是对的 - 代码不会添加新行。我假设我们已经有了想要编辑的行。

【解决方案3】：

JQuery 可能是你的朋友。请参阅此question，因为它类似于您正在尝试做的事情。

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

【讨论】：

【解决方案4】：

好吧，既然它是 jQuery，而且是一个排序表，你可以看看我们在 sucess 中使用的 jqGrid 之类的插件。

在此处查看链接：jqGrid

他们有示例执行您在表格中或在模式对话框中描述的内容，这里有很多选项。

【讨论】：