Необхоим пример html table с возможность добавить строку
 

Здравствуйте.

Хочу поместить на форму объект типа таблицу с возможностью добавлять новые строки и удалять добавленные.

Подскажите каким образом это лучше сделать.

На текущий момент удалось найти следующую библиотеку

//code.jquery.com/jquery-1.12.3.js
https://cdn.datatables.net/1.10.12/j...aTables.min.js
https://cdn.datatables.net/1.10.12/c...Tables.min.css

все бы ничего, НО при нажатии кнопки новая строка появляется, НО после сразу же пропадает

<script type="text/javascript">
                $(document).ready(function() {
                    var t = $('#example').DataTable();
                    var counter = 1;

                    $('#addRow').on( 'click', function () {
                        t.row.add( [
                            counter +'.1',
                            counter +'.2',
                            counter +'.3',
                            counter +'.4',
                            counter +'.5',
                            counter +'.6'
                        ] ).draw(false);

                        counter++;
                    } );

                    // Automatically add a first row of data
                    // $('#addRow').click();
                } );
        </script>

<button id="addRow" class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>


        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </tfoot>
        </table>

Подскажите в чем может быть проблема.

Футер определяется до тбоди, и в футере обычные td ну и само тбоди надо вообще-то нарисовать. Строка пропадает видимо потому, что пятница. )))

скопировал как было в примере, от себя добавил только Column 6...

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </tfoot>
    </table>

Чтобы добавить строки, нужно место куда добавлять. Если там нет интерфейса выбора строки, то добавить можно или в начало, или в конец. А чтобы удалить строку, такой интерфейс уже нужен. Обычно чекбоксами рисуют. То есть вопрос вовсе не решится когда строка добавится. Это только начало геморроя.

Ищи по словам datagrid что-то более мощное )))

проблему с динамическим добавлением строки решить удалось

<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">

<br>
<br>
<br>

<script type="text/javascript">
$(document).ready(function() {
    var dataSet = [
        [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25"],
        [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25"],
        [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12"],
        [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29"]
    ];

var t = $('#example').DataTable(

        {
            data: dataSet,
            columns: [
                { title: "col1" },
                { title: "col2" },
                { title: "col3" },
                { title: "col4" },
                { title: "col5" }
            ]
        }

);
var counter = 1;

$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw( false );

counter++;
} );

// Automatically add a first row of data
$('#addRow').click();
} );
</script>
<div class="container">
<button id="addRow" class="btn btn-success"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Имя</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Имя</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </tr>
    </tfoot>
</table>
</div>

</body>
</html>

но теперь открылся вопрос как информацию из новой строки превратить в insert в БД

Школота штоле к пересдаче ЭГЕ готовится? Ну так не делается, чтобы сперва запихать данные в хтмл, а потом доставать их оттудова, чтобы запихать в БД. Такое может придумать только какой-нить дебильный автор дебильного учебника, типа а вот так сделай, пофигу зачем. )))

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