У меня есть кнопка, а также в строке таблицы. Когда я нажимаю кнопку, в таблице должна быть добавлена новая строка, и кнопка должна присутствовать в новой добавленной строке .refer картинка Java Script: динамически добавлять текстовое поле и кнопку в таблицу
-2
A
ответ
0
Это быстрое решение для добавления новых строк с кнопками, которые также будут добавлять новые строки.
Вы не добавили кода, но это работает.
https://jsfiddle.net/scheda/Lhsvmqoy/
var b = document.querySelector('.clicky')
var table = document.querySelector('table');
var insert_this = '<tr><td><input type="text" placeholder="Look ma!"/><button class="clicky">Add more stuff</button></td></tr>';
document.querySelector('body').addEventListener('click', function(e) {
if (e.target.className === 'clicky') {
table.innerHTML += insert_this;
}
});
0
Это должно работать, как вы ожидаете:
<!DOCTYPE html>
<head>
<style>
td,table{border:solid 1px;}
</style>
<title>Table sample </title>
</head>
<body>
<table id="myTable">
<tr>
<td>Row 1</td><td></td>
</tr>
<tr>
<td>Row 2</td><td><button id="newRow">New Row (original button)</button></td>
</tr>
</table>
</body>
<script>
function addRow() {
// Get a reference to the table
var tableRef = document.getElementById('myTable');
// Insert a row in the table at the end
var newRow = tableRef.insertRow(tableRef.rows.length);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML="Row " + tableRef.rows.length;
var newCell = newRow.insertCell(1);
// Append button node to the cell
var newButton = document.getElementById('newRow');
newCell.appendChild(newButton);
}
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
}else {
elem.attachEvent("on" + event, function() {
// set the this pointer same as addEventListener when fn is called
return(fn.call(elem, window.event));
});
}
}
var mybutton = document.getElementById("newRow");
addEvent(mybutton,"click",addRow);
</script>
</html>
Источник/Кредиты: Функция addEventListener:adding event listener cross browser
Добавить функцию строки (редактировался) : https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow
Смежные вопросы
- 1. Validate динамически добавлять текстовое поле
- 2. Динамически добавлять текстовое поле в asp.net
- 3. Текстовое поле Java Script
- 4. Динамически добавлять текстовое поле в WPF
- 5. Javascript, чтобы динамически добавлять текстовое поле и снова конвертировать текстовое поле в текст
- 6. Динамически добавлять текстовое поле внутри формы
- 7. java: динамически сгенерированное текстовое поле, нажав на кнопку
- 8. Динамически добавлять переменные в таблицу html
- 9. Динамически добавлять строки в таблицу
- 10. Выровнять текстовое поле и кнопку
- 11. Динамически добавлять текстовое поле в окно, когда флажок установлен.
- 12. Как я могу динамически добавлять строки в таблицу, нажав кнопку?
- 13. динамически добавлять число строк в таблицу
- 14. удалить динамически созданное текстовое поле
- 15. Как генерировать поле выбора и текстовое поле динамически в HTML
- 16. Динамически добавлять строки в таблице HTML. Используя JavaScript и получая текстовое поле для каждого текстового поля, отправив кнопку
- 17. jQuery динамически добавлять количество строк в таблицу?
- 18. Filemaker Pro 11 Script - динамически добавлять поля?
- 19. не в состоянии проверить текстовое поле с помощью Java Script
- 20. Как добавить текстовое поле динамически?
- 21. Динамически добавлять строки в таблицу HTML
- 22. Динамически добавлять Редактировать текст
- 23. динамически создавать текстовое поле
- 24. Добавить кнопку в текстовое поле
- 25. Текстовое поле автозаполнения в Google Script
- 26. динамически добавлять вкладки, на кнопку мыши
- 27. Поместите кнопку в текстовое поле
- 28. динамически удалять текстовое поле
- 29. Сохраняйте текстовое поле и кнопку внутри ящика
- 30. Добавить css-стиль в текстовое поле динамически
У вас есть код? Что вы пробовали? – Soma
Сначала создайте образец. – nikhil
http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/ – vrajesh