Динамические таблице - JavaScript, Ajax

dbalor · 22.05.2018, 09:25

Есть талица в каждой строке 4 inputа: 2-текстк и 2-кнопки(+ и -)
Как добавить строку в таблице, после строки в которой находится кнопк "+"а по которой кликнули?

Как удалить строку в таблице в которой кликнули кнопку "-" по которой кликнули?

Код:

...
 <tr>                          
                  <td><input type="text" class="datch_data" name='x_0' /></td>
                  <td><input type="text" class="datch_data" name='y_0' /></td>
                  <td id="xybtn">
                    <input type="button" id="addxy" value="+" onclick="addXY(id)" name='dis'/>
                    <input type="button" id="delxy" value="-" onclick="delXY(id)" name='dis'/>
                  </td>
 </tr>
...

Stanislav · 22.05.2018, 09:45

Настолько лень описывать банальные вещи, которые вы можете прогуглить на раз, потому просто кину сыль https://www.tutorialspoint.com/How-t...-row-in-jQuery дальше прогуглите сами

dbalor · 22.05.2018, 09:55

A c помощью javascript можно?

Serge_Bliznykov · 22.05.2018, 10:16

Цитата:

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

A c помощью javascript можно?

чистый JS ? Наверняка можно.
А чем Вас jQuery не устраивает? Поверьте, это ОЧЕНЬ достойная библиотека!
Использовать очень просто. Жизнь упрощает в разы. Ресурсы потребляет умерено.

p.s. приведите хотя бы три строчки вашей таблицы с "в каждой строке 4 inputа: 2-текстк и 2-кнопки(+ и -)"

dbalor · 22.05.2018, 10:27

Цитата:

p.s. приведите хотя бы три строчки вашей таблицы с "в каждой строке 4 inputа: 2-текстк и 2-кнопки(+ и -)"

При открытии только одна строчка(см выше).

Serge_Bliznykov · 22.05.2018, 10:59

Цитата:

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

При открытии только одна строчка(см выше).

ок.

Вы не ответили, а чем не нравится jQuery ?

Stanislav · 22.05.2018, 11:33

Цитата:

Использовать очень просто. Жизнь упрощает в разы. Ресурсы потребляет умерено.

помимо того что еще и кросс-платформенный...
dbalor если бы вы хотели обучаться, сами бы гуглили на чистом яваскрипте, а коли не хотите возьмите библиотеку jquery она действительно упрощает работу как сказал Serge_Bliznykov или вы пытаетесь сэкономить 68 кб которые еще и в добавок потом захешируется вашим броузером?

Serge_Bliznykov · 22.05.2018, 11:49

полностью согласен со словами Станислава!

а вот и на "чистом" JavaScript:
пример в песочнице

код:

Код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
<table>
 <tr>                          
                  <td><input type="text" class="datch_data" name='x_0' /></td>
                  <td><input type="text" class="datch_data" name='y_0' /></td>
                  <td>
                    <input type="button" value="+" onclick="addXY(this)" name='dis'/>
                    <input type="button" value="-" onclick="delXY(this)" name='dis'/>
                  </td>
 </tr>
</table>

<script>
function addXY(el){
  var row = el.parentNode.parentNode;
  if(row){
    // alert(row.rowIndex);
    var clone = row.cloneNode(true);
    row.parentNode.insertBefore(clone, row.nextSibling);
  }
}
function delXY(el){
  var row = el.parentNode.parentNode;
  if(row){
    if(row.rowIndex==0){
     alert('Первую строку таблицы удалить нельзя!');
    }
    else {
        row.parentNode.deleteRow(row.rowIndex);
    }

  }
}
</script>

</body>
</html>

dbalor · 23.05.2018, 02:23

Спасибо Serge_Bliznykov

, но код вставляет строку копированием(клон) поэтому содержимое полей ввода тоже копируется. Мне надо чтобы новые поля ввода были пустыми.

Stanislav · 23.05.2018, 07:33

Голову включать совсем не? нужно пусто - так почистите. На вопрос по jQuery так и не ответили. не красиво.

22.05.2018, 09:25	#1
dbalor Форумчанин Регистрация: 06.09.2016 Сообщений: 199	Динамические таблице Есть талица в каждой строке 4 inputа: 2-текстк и 2-кнопки(+ и -) Как добавить строку в таблице, после строки в которой находится кнопк "+"а по которой кликнули? Как удалить строку в таблице в которой кликнули кнопку "-" по которой кликнули? Код: `... <tr> <td><input type="text" class="datch_data" name='x_0' /></td> <td><input type="text" class="datch_data" name='y_0' /></td> <td id="xybtn"> <input type="button" id="addxy" value="+" onclick="addXY(id)" name='dis'/> <input type="button" id="delxy" value="-" onclick="delXY(id)" name='dis'/> </td> </tr> ...` Последний раз редактировалось dbalor; 22.05.2018 в 09:31.

22.05.2018, 09:45	#2
Stanislav Квадрокоптерист Участник клуба Подтвердите свой е-майл Регистрация: 29.09.2007 Сообщений: 1,824	Настолько лень описывать банальные вещи, которые вы можете прогуглить на раз, потому просто кину сыль https://www.tutorialspoint.com/How-t...-row-in-jQuery дальше прогуглите сами Я часть той силы, что вечно хочет зла, но вечно совершает благо..

23.05.2018, 02:23	#9
dbalor Форумчанин Регистрация: 06.09.2016 Сообщений: 199	Спасибо Serge_Bliznykov, но код вставляет строку копированием(клон) поэтому содержимое полей ввода тоже копируется. Мне надо чтобы новые поля ввода были пустыми.

23.05.2018, 07:33	#10
Stanislav Квадрокоптерист Участник клуба Подтвердите свой е-майл Регистрация: 29.09.2007 Сообщений: 1,824	Голову включать совсем не? нужно пусто - так почистите. На вопрос по jQuery так и не ответили. не красиво. Я часть той силы, что вечно хочет зла, но вечно совершает благо..

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
динамические структуры	uibiwe	Помощь студентам	2	20.01.2014 13:23
Динамические поддомены	Mr_freeman	PHP	4	05.08.2013 11:01
динамические списки	tricksler	Помощь студентам	0	10.12.2010 21:15
Вычисляемое поле в таблице ACCESS, создать вычисляемое поля в таблице аксес	artlayers	Microsoft Office Access	2	04.11.2009 19:29
Слияние шаблона с данными из таблице, и как подсичтать значение количества полей в таблице	n4ela	Microsoft Office Access	3	07.03.2009 12:04

22.05.2018, 09:55	#3
dbalor Форумчанин Регистрация: 06.09.2016 Сообщений: 199	A c помощью javascript можно?