Создать таблицу c кнопками

@zhaneka_357 · Регистрация: 03.11.2017

Студворк — интернет-сервис помощи студентам

Помогите пожалуйста, сказали создать таблицу на javascript с кнопками Edit, delete and insert. Кнопка Delete работает, а вот edit and insert нет, а также нужно сделать без перезагрузки страницы, не знаю как сделать. Помогите пожалуйста.

JavaScript
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <title></title>
          <link rel="stylesheet" href="http://register.semgu.kz/bootstrap/css/bootstrap.min.css">
          <script src="http://register.semgu.kz/plugins/jQuery/jQuery-2.1.4.min.js"></script>
          <link rel="stylesheet" href="http://register.semgu.kz/bootstrap/css/bootstrap.min.css">     
                    <body style="background-image: url(789.jpg)">
 
                    <div class="nav-item search">
                        <form action="/q/" method="GET">
                            <input type="text" name="q" placeholder="Search . . ." autocomplete="off">
                        </form>
                    </div>
 
</body>
</head>
 
<body>
<html> 
         <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Number</th>
                <th>Surname</th>
                <th>Name</th>
                <th>Specialty</th>
                <th>Course</th>
                <th>Action</th>  
                <th>Action</th>  
                <th>Action</th>                
            </tr>
        </thead>
          <tbody>
 
<style> 
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
td, th {
border: 1px solid   #000000; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
padding-bottom: 19px;   /* устанавливаем внутренние отступы снизу для всех сторон */
}
</style> 
 
                <tr id='row-100'>
                <td id="k-100">1</td>
                <td id="s-100">Aliev</td>
                <td id="n-100">Madi</td>
                <td id="spec-100">VT</td>
                <td id="course-100">3</td>
                <td><button class="btn edit" id="edit-100">Edit</button></td>
                <td><button class="btn delete" id="delete-100">Delete</button></td>
                 <td><button class="btn insert" id="insert-100">Insert</button></td>
                </tr>
 
            <tr id='row-101'>
                <td id="k-100">2</td>
                <td id="s-101">Batyrov</td>
                <td id="n-101">Zhandos</td>
                <td id="spec-101">VT</td>
                <td id="course-101">3</td> 
                <td><button class="btn edit" id="edit-101">Edit</button></td>
                <td><button class="btn delete" id="delete-101">Delete</button></td>
                <td><button class="btn insert" id="insert-101">Insert</button></td>
                </tr>
                </tbody>
</table>
</tbody>
</table>
 
 
</div>
<script>
$('tbody').on('click', 'button', function() {
    var id = $(this).attr('id');
    var d = id.split('-')
    if (d[0]=='edit') {
      $('#es').val($('#s-'+d[1]).text());
      $('#en').val($('#n-'+d[1]).text());
      $('#id').val(d[1]);
    } else {
      $('#row-'+d[1]).hide(); 
    }
    
});
$('div').on('click', 'button', function() {
    var id = $('#id').val();
    $('#s-'+id).text($('#es').val());
    $('#n-'+id).text($('#en').val());
    //$('#row-'+id).hide();
});
 
 
function FullListSearch() {
    $("#InfoSearch").keyup(function () {
        var V = this.value;
        var value = this.value.toLowerCase();
        var Operator = value[0];
 
        var compFunc = function (a, b) {
            return a == b;
        };
 
        if (Operator == '>' || Operator == '<') {
            value = value.substring(1);
 
            if (Operator == '>') compFunc = function (a, b) {
                return a > b;
            };
            else // '<' 
            compFunc = function (a, b) {
                return a < b;
            };
        }
        var numVal = parseInt(value);
        if (isNaN(numVal)) alert("invalid input!");
 
        $("#Info").find(".fulllist").each(function () {
            var val = parseInt($(this).text());
            $(this)[compFunc(val, numVal) ? "show" : "hide"]();
        });
    });
}
 
</script>

@atanov · 28.04.2018, 12:02

zhaneka_357, а что должны кнопки

Сообщение от zhaneka_357

Edit, delete and insert

делать?

@zhaneka_357 · 30.04.2018, 10:42 **[ТС]**

Edit редактировать строку, delete удалить строку таблицы, insert добавить строку в таблицу.

Добавлено через 38 секунд
atanov,

@lemon4er · 30.04.2018, 12:53

zhaneka_357, ну кнопка delete у вас просто скрывает строку, а не удаляет. А что бы реализовать добавление и редактирование нужна форма какая-то для внесения данных. Как вариант использовать модальное окно

@fanatikus · 30.04.2018, 13:43

Сообщение от lemon4er

нужна форма какая-то для внесения данных. Как вариант использовать модальное окно

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

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@zhaneka_357 0 / 0 / 0 Регистрация: 03.11.2017 Сообщений: 14
	30.04.2018, 10:42 [ТС]
	Edit редактировать строку, delete удалить строку таблицы, insert добавить строку в таблицу. Добавлено через 38 секунд atanov, 0

@lemon4er 15 / 15 / 16 Регистрация: 19.07.2017 Сообщений: 61
	30.04.2018, 12:53
	zhaneka_357, ну кнопка delete у вас просто скрывает строку, а не удаляет. А что бы реализовать добавление и редактирование нужна форма какая-то для внесения данных. Как вариант использовать модальное окно 0