Таблицы данных JQuery Добавить новую строку

Я создаю страницу регистрации, где каждый может зарегистрировать до 20 других людей, если захочет. Итак, у меня есть эти текстовые поля:

First Name: <br/><input type="text" name="fname" id="fname" /> <br/>
Last Name: <br/><input type="text" name="lname" id="lname" /> <br/>
Email: <br/><input type="text" name="email" id="email"/> <br/>

Это моя html-таблица с инициализацией JQuery DataTables:

<div id="tables">
    <table id="table" border="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>
</div>

$('#reg_more').dataTable({
    "bLengthChange": false,
    "bInfo": false
});

Теперь я хочу добавить кнопку добавления, чтобы пользователь мог ввести имя и фамилию, адрес электронной почты и нажать «Добавить», и они будут помещены в таблицу. Как мне это сделать?


html jquery html-table row datatables
person Richard    schedule 16.09.2012    source источник
comment
@StephenSarcsamKamenar да, это именно то, что я сделал перед публикацией, и я не мог понять ответы. Я даже пробовал несколько решений без успеха. Вот почему я пришел сюда, чтобы кто-то мог объяснить решение, которое я могу понять. Google всегда мой первый вариант   -  person Richard    schedule 16.09.2012
comment
datatables.net/examples/api/add_row.html не помогает? С какой частью этого у вас проблемы?   -  person Farzher    schedule 16.09.2012
comment
@StephenSarcsamKamenar, это на самом деле один из кодов, которые я пробовал. Но после внедрения и тестирования. Я не вижу, как его использовать. Должен ли я создавать кнопку, событие onclick которой вызывает эту функцию?   -  person Richard    schedule 16.09.2012

Ответы (3)


arrow_upward
23
arrow_downward 

$(document).ready(function() {
    $('#example').dataTable();
    $('#addbtn').click(addrow);
} );

function addrow() {
    $('#example').dataTable().fnAddData( [
        $('#fname').val(),
        $('#lname').val(),
        $('#email').val() ] );

}

вам нужно вызвать addrow() при нажатии кнопки.

Добавьте эту кнопку в свой html-код

<input type="button" value="add" id="addbtn" />
person User 99x    schedule 16.09.2012
comment
ах, намного лучше, я новичок в jquery и datatables, поэтому мне очень сложно делать такие вещи. Но это имеет гораздо больший смысл. Так что я могу сделать то же самое для редактирования и удаления. Еще 1 вопрос, как мне правильно опубликовать все эти данные, чтобы я мог добавить их в базу данных mysql? Допустим, они зарегистрировали себя и еще 20 человек, мне нужно добавить 21 запись в мою базу данных mysql. - person Richard; 16.09.2012
comment
чтобы зарегистрироваться, вы можете использовать jQuery ajax для вставки данных в базу данных. - person User 99x; 16.09.2012

arrow_upward
5
arrow_downward

Вот как это теперь делается в DataTables 1.10

<input type="button" value="add" id="addbtn" />

var dTable = $('#example').DataTable();
$('#addbtn').on( 'click', function () {
    dTable.row.add([
        $('#fname').val(),
        $('#lname').val(),
        $('#email').val() 
    ]).draw();
});
person James Sampica    schedule 05.05.2014

arrow_upward
0
arrow_downward

Это тоже может быть полезно, но не всегда время от времени. Я отладил это сам, и это не займет много времени, даже если у вас есть больше данных.

var table = $(".tableclassName")["1"]
var tableClone = $(".tableclassName")["3"]
$(yournewrowtext).insertAfter(table.children["1"].children[currentRowId]);
$(yourfirstcolumn).insertAfter(tableClone.children["1"]. 
children[currentRowId]);

Примечание. Если вы не используете фиксированный столбец, вы можете удалить эту строку $(yourfirstcolumn).insertAfter(tableClone.children["1"].

person Eliotjse    schedule 24.05.2017