ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / html table с возможностью добавления новой строки
3 сообщений из 3, страница 1 из 1
html table с возможностью добавления новой строки
    #39270615
drno
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
drno
Гость
Здравствуйте.

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

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

p.s.
На текущий момент удалось найти следующую библиотеку
https://datatables.net/examples/api/add_row.html
она использует
//code.jquery.com/jquery-1.12.3.js
https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css

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

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
        <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>




Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
        <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>



Подскажите в чем может быть проблема.
...
Рейтинг: 0 / 0
08.07.2016, 14:36
| Ответить | Цитировать | Написать  
html table с возможностью добавления новой строки
    #39270870
drno
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
drno
Гость
drno,

проблема решена

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
<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>
...
Рейтинг: 0 / 0
08.07.2016, 19:38
| Ответить | Цитировать | Написать  
html table с возможностью добавления новой строки
    #39270948
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
drno,

а чем не подошли родные методы insertRow, insertCell, deleteRow ?

 
Пример на добавление строк сверху/снизу, и столбов слева/справа в любых комбинациях между собой
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Добавить строки, столбцы</title>
<style>
table {
  font:15px arial,sans-serif;
  border-collapse:collapse;
  margin-bottom:10px;
}
td {border:1px solid #aaa; padding:4px;}
button {margin:2px;}
</style>
</head>
<body>
<table id="myTable">
  <tr> <td>cell 1_1</td> <td>cell 1_2</td> </tr>
  <tr> <td>cell 2_1</td> <td>cell 2_2</td> </tr>
  <tr> <td>cell 3_1</td> <td>cell 2_3</td> </tr>
  <tr> <td>cell 4_1</td> <td>cell 2_4</td> </tr>
</table>
<button type="button" onclick="addRowTop()">Вставить строку на самый верх таблицы</button>
<button type="button" onclick="addRowBottom()">Вставить строку в самый низ таблицы</button>
<br>
<button type="button" onclick="addColumnLeft()">Добавить колонку в левую часть таблицы</button>
<button type="button" onclick="addColumnRight()">Добавить колонку в правую часть таблицы</button>

<script>
var el = document.getElementById('myTable');

function addRowTop() {
  var cols_cnt = el.rows[0].cells.length;
  var row = el.insertRow(0);

  for (var i=0; i < cols_cnt; i++) {
    var NewCell = row.insertCell(-1);
    NewCell.innerHTML = 'Text on top ' + (i+1).toString();
  }
}

function addRowBottom() {
  var cols_cnt = el.rows[el.rows.length-1].cells.length;
  var row = el.insertRow(-1);

  for (var i=0; i < cols_cnt; i++) {
    var NewCell = row.insertCell(-1);
    NewCell.innerHTML = 'Text on bottom ' + (i+1).toString();
  }
}

function addColumnLeft() {
  var rows_cnt = el.rows.length;
  var cols_cnt = el.rows[0].cells.length;
  var cell;

  for (var i=0; i < rows_cnt; i++) {
    cell = el.rows[i].insertCell(0);
    cell.innerHTML = Math.floor(Math.random()*10000);
  }
}

function addColumnRight() {
  var rows_cnt = el.rows.length;
  var cols_cnt = el.rows[0].cells.length;
  var cell;

  for (var i=0; i < rows_cnt; i++) {
    cell = el.rows[i].insertCell(-1);
    cell.innerHTML = Math.floor(Math.random()*10000);
  }
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
08.07.2016, 22:39
| Ответить | Цитировать | Написать  
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / html table с возможностью добавления новой строки
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]