Как мне заполнить таблицу? - PullRequest
Новая
       10

Как мне заполнить таблицу?

0 голосов
/ 02 марта 2010

У меня есть пустая таблица, которую я хотел бы заполнить на основе данных, введенных на той же странице.

Пример. Пользователь вводит имя, DOB. Нажмите Добавить. Таблица с именем и столбцом 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>

Ответы [ 4 ]

3 голосов
/ 02 марта 2010

Просто чтобы завершить ответ Кита Руссо (добавлен код для добавления новой строки): 

<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 голосов
/ 02 марта 2010

В первой таблице добавьте идентификатор DisplayTable и измените столбцы таким образом, чтобы соответственно иметь class = "name" и class = "dob".

jquery сделать это следующим образом: 

var $tr = $('#DisplayTable tr:last');
$tr.find('.name').text($('#txtName').val());
$tr.find('.dob').text($('#txtDOB').val());
0 голосов
/ 02 марта 2010

Ну, так как это jQuery и своего рода таблица, вы можете посмотреть на плагин, такой как jqGrid, который мы использовали с sucess.

См. Ссылку здесь: jqGrid

У них есть примеры, которые описывают то, что вы описываете, либо в таблице, либо в модальном диалоге, здесь много вариантов.

0 голосов
/ 02 марта 2010

JQuery может быть вашим другом здесь. Посмотрите на этот вопрос , поскольку он напоминает то, что вы пытаетесь сделать.

Вам также может понадобиться сделать сообщение на сервере, чтобы сохранить ваши данные. Увидеть jQuery post для справки

...