Добавление/удаление строк таблицы динамически с использованием JavaScript
Я пытаюсь добавить/удалить строки таблицы после этот пример и этот пример.
Здесь мой код:
HTML-форма
<div id="POItablediv">
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<table id="POITable" border="1">
<tr>
<td>POI</td>
<td>Latitude</td>
<td>Longitude</td>
<td>Delete?</td>
<td>Add Rows?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="latbox" readonly=true/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td>
</tr>
</table>
</div>
JavaScript
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
var x=document.getElementById('POITable').insertRow(1);
var c1=x.insertCell(0);
var c2=x.insertCell(1);
c1.innerHTML="NEW CELL1";
c2.innerHTML="NEW CELL2";
}
Теперь, как видите, в моей таблице есть текстовые поля и кнопки. Что я хочу:
-
Просто повторить структуру строки. Я не могу сделать это прямо сейчас, так как innerHTM просто принимает тексты. Как вставить текстовое поле или метку?
-
Идентификаторы текстовых полей также должны быть разными, так как я буду получать значения позже, чтобы поместить их в базу данных.
-
Я хочу добавить функцию для увеличения числа POI, а также
Может ли кто-нибудь помочь мне, пожалуйста?
Ответы
Ответ 1
Вы можете просто клонировать первую строку с входными данными, затем вставлять вложенные входы и обновлять свой идентификатор, чтобы добавить номер строки (и сделать то же самое с первой ячейкой).
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
var x=document.getElementById('POITable');
// deep clone the targeted row
var new_row = x.rows[1].cloneNode(true);
// get the total number of rows
var len = x.rows.length;
// set the innerHTML of the first row
new_row.cells[0].innerHTML = len;
// grab the input from the first cell and update its ID and value
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
// grab the input from the first cell and update its ID and value
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
// append the new row to the table
x.appendChild( new_row );
}
Демо ниже
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow() {
console.log('hi');
var x = document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild(new_row);
}
<div id="POItablediv">
<input type="button" id="addPOIbutton" value="Add POIs" /><br/><br/>
<table id="POITable" border="1">
<tr>
<td>POI</td>
<td>Latitude</td>
<td>Longitude</td>
<td>Delete?</td>
<td>Add Rows?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="latbox" /></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()" /></td>
</tr>
</table>
Ответ 2
Это кажется намного более чистым, чем ответ выше...
<script>
var maxID = 0;
function getTemplateRow() {
var x = document.getElementById("templateRow").cloneNode(true);
x.id = "";
x.style.display = "";
x.innerHTML = x.innerHTML.replace(/{id}/, ++maxID);
return x;
}
function addRow() {
var t = document.getElementById("theTable");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
r.parentNode.insertBefore(getTemplateRow(), r);
}
</script>
<table id="theTable">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr id="templateRow" style="display:none">
<td>{id}</td>
<td><input /></td>
</tr>
</table>
<button onclick="addRow();">Go</button>
Ответ 3
Легкий Javascript Добавить ряд строк с функциональностью удаления
Приветствия!
<TABLE id="dataTable">
<tr><td>
<INPUT TYPE=submit name=submit id=button class=btn_medium VALUE=\'Save\' >
<INPUT type="button" value="AddMore" onclick="addRow(\'dataTable\')" class="btn_medium" />
</td></tr>
<TR>
<TD>
<input type="text" size="20" name="values[]"/> <br><small><font color="gray">Enter Title</font></small>
</TD>
</TR>
</table>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell3 = row.insertCell(0);
cell3.innerHTML = cell3.innerHTML +' <input type="text" size="20" name="values[]"/> <INPUT type="button" class="btn_medium" value="Remove" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" /><br><small><font color="gray">Enter Title</font></small>';
//cell3.innerHTML = cell3.innerHTML +' <input type="text" size="20" name="values[]"/> <INPUT type="button" class="btn_medium" value="Remove" onclick="this.parentNode.parentNode.innerHTML=\'\';" /><br><small><font color="gray">Enter Title</font></small>';
}
</script>
Ответ 4
1 и 2: innerHTML может принимать HTML, а также текст. Вы можете сделать что-то вроде:
c1.innerHTML = "<input size=25 type=\"text\" id='newID' readonly=true/>";
Может или не может быть лучшим способом сделать это, но вы можете сделать это таким образом.
3: Я бы просто использовал глобальную переменную, которая содержит количество POI и увеличивает/уменьшает ее каждый раз.
Ответ 5
Если вы поместите кнопку удаления в каждую строку, то:
<tr>
<td><input type="button" value="Delete row" onclick="deleteRow(this);">
<td><input type="text">
<td><input type="text">
И функция deleteRow может быть:
function deleteRow(el) {
// while there are parents, keep going until reach TR
while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
el = el.parentNode;
}
// If el has a parentNode it must be a TR, so delete it
// Don't delte if only 3 rows left in table
if (el.parentNode && el.parentNode.rows.length > 3) {
el.parentNode.removeChild(el);
}
}
Если все ваши строки имеют одинаковый контент, будет намного быстрее добавить строку, клонируя существующую строку:
function addRow(tableID) {
var table = document.getElementById(tableID);
if (!table) return;
var newRow = table.rows[1].cloneNode(true);
// Now get the inputs and modify their names
var inputs = newRow.getElementsByTagName('input');
for (var i=0, iLen=inputs.length; i<iLen; i++) {
// Update inputs[i]
}
// Add the new row to the tBody (required for IE)
var tBody = table.tBodies[0];
tBody.insertBefore(newRow, tBody.lastChild);
}
Ответ 6
Этот код может помочь кому-то
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<style type="text/css">
.democlass{
color:red;
}
</style>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;
var row = table.insertRow(rowCount);
for(var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
row = table.insertRow(table.rows.length);
for(var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
}
row = table.insertRow(table.rows.length);
for(var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[2].cells[i].innerHTML;
}
row = table.insertRow(table.rows.length);
for(var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
if(i == (colCount - 1)) {
newcell.innerHTML = "<INPUT type=\"button\" value=\"Delete Row\" onclick=\"removeRow(this)\"/>";
} else {
newcell.innerHTML = table.rows[3].cells[i].innerHTML;
}
}
}
/**
* This method deletes the specified section of the table
* OR deletes the specified rows from the table.
*/
function removeRow(src) {
var oRow = src.parentElement.parentElement;
var rowsCount = 0;
for(var index = oRow.rowIndex; index >= 0; index--) {
document.getElementById("dataTable").deleteRow(index);
if(rowsCount == (4 - 1)) {
return;
}
rowsCount++;
}
//once the row reference is obtained, delete it passing in its rowIndex
/* document.getElementById("dataTable").deleteRow(oRow.rowIndex); */
}
</SCRIPT>
</HEAD>
<BODY>
<form name="myForm">
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD>
<INPUT type="checkbox" name="chk"/>
</TD>
<TD>
Code
</TD>
<TD>
<INPUT type="text" name="txt"/>
</TD>
<TD>
Select Country
</TD>
<TD>
<SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD> </TD>
<TD>
First Name
</TD>
<TD>
<INPUT type="text" name="txt1"/>
</TD>
<TD>
Last Name
</TD>
<TD>
<INPUT type="text" name="txt2"/>
</TD>
</TR>
<TR>
<TD> </TD>
<TD>Phone</TD>
<TD>
<INPUT type="text" name="txt3"/>
</TD>
<TD>Address</TD>
<TD>
<INPUT type="text" name="txt4" class="democlass"/>
</TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD>
</TD>
<TD> </TD>
<TD>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ответ 7
Я использовал некоторые из указанных выше решений плюс решения из других сообщений, чтобы создать рабочее решение для динамической таблицы, содержащей поля ввода. Я делаю это, потому что это может помочь кому-то, кто находит этот поток после поиска тех же вещей, которые привели меня к нему, а также потому, что принятый ответ (и связанный с ним jsfiddle) на самом деле не работает! То есть, он не индексирует строки таблицы правильно после нескольких вставок/удалений. Ключевая проблема заключается в том, как однозначно индексировать динамические данные строк, что возможно с помощью бит jquery:
<form id=frmLines>
<table id=tabLines>
<tr>
<td>img src='/some/suitable/graphic' onclick='removeLine(this);'/></td>
<td><input type='text' name='field1' /></td>
<td><input type='text' name='field2' /></td>
<td><input type='text' name='field3' /></td>
</tr>
<tr>
<td><img src='/some/suitable/graphic' onclick='addLine();' /></td>
<td colspan=3> </td>
</tr>
</table>
</form>
Обратите внимание, что форма и таблица имеют идентификатор для прямого обращения к DOM, но вы не можете использовать id в полях ввода, чтобы сделать их уникальными, вам нужно будет ввести индекс, который будет значительно усложнять код - и его достаточно легко для доступа к ним по имени при обработке формы (см. ниже)
Затем javascript для управления добавлением и удалением строк выглядит следующим образом:
function addLine() {
var tabLines = document.getElementById("tabLines");
var tabLinesRow = tabLines.insertRow(tabLines.rows.length-1);
var col1html = "<img src='/some/suitable/graphic' onclick='removeLine(this);'>";
var col2html = "<input type='text' name='field1' />";
var col3html = "<input type='text' name='field2' />";
var col4html = "<input type='text' name='field3' />";
var col1 = tabLinesRow.insertCell(0); col1.innerHTML=col1html;
var col2 = tabLinesRow.insertCell(1); col2.innerHTML=col2html;
var col3 = tabLinesRow.insertCell(2); col3.innerHTML=col3html;
var col4 = tabLinesRow.insertCell(3); col4.innerHTML=col4html;
}
function removeLine(lineItem) {
var row = lineItem.parentNode.parentNode;
row.parentNode.removeChild(row);
}
Затем конечная часть головоломки - javascript для обработки данных формы при ее отправке. Ключевая функция jquery здесь .eq() - которая позволяет вам получить доступ к именам полей в порядке их появления в форме - то есть в порядке строк в таблице.
var frmData = {}; // an object to contain all form data
var arrLines = new Array(); // array to contain the dynamic lines
var tabLines = document.getElementById("tabLines").rows.length-1;
for (i=0;i<tabLines;i++) {
arrLines[i] = {};
arrLines[i]['no'] = i+1;
arrLines[i]['field1'] = $("#frmLines input[name=field1]").eq(i).val();
arrLines[i]['field2'] = $("#frmLines input[name=field2]").eq(i).val();
arrLines[i]['field3'] = $("#frmLines input[name=field3]").eq(i).val();
}
frmData['lines'] = arrLines;
frmData['another_field'] = $('#frmLines input[name=another_field]").val();
var jsonData = JSON.stringify(frmData);
// lines of data now in a JSON structure as indexed array
// (plus other fields in the JSON as required)
// ready to post via ajax etc
Я надеюсь, что это поможет кому-то прямо или косвенно. Есть несколько тонких методов, которые не так сложны, но мне потребовалось 3-4 часа, чтобы собрать их вместе.
Ответ 8
Javascript динамически добавляя данные таблицы.
SCRIPT
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;
var validate_Noof_columns = (colCount - 1); // •No Of Columns to be Validated on Text.
for(var j = 0; j < colCount; j++) {
var text = window.document.getElementById('input'+j).value;
if (j == validate_Noof_columns) {
row = table.insertRow(2); // •location of new row.
for(var i = 0; i < colCount; i++) {
var text = window.document.getElementById('input'+i).value;
var newcell = row.insertCell(i);
if(i == (colCount - 1)) { // Replace last column with delete button
newcell.innerHTML = "<INPUT type='button' value='X' onclick='removeRow(this)'/>"; break;
} else {
newcell.innerHTML = text;
window.document.getElementById('input'+i).value = '';
}
}
}else if (text != 'undefined' && text.trim() == ''){
alert('input'+j+' is EMPTY');break;
}
}
}
function removeRow(onclickTAG) {
// Iterate till we find TR tag.
while ( (onclickTAG = onclickTAG.parentElement) && onclickTAG.tagName != 'TR' );
onclickTAG.parentElement.removeChild(onclickTAG);
}
HTML
<div align='center'>
<TABLE id='dataTable' border='1' >
<TBODY>
<TR><th align='center'><b>First Name:</b></th>
<th align='center' colspan='2'><b>Last Name:</b></th>
<th></th>
</TR>
<TR><TD ><INPUT id='input0' type="text"/></TD>
<TD ><INPUT id='input1' type='text'/></TD>
<TD>
<INPUT type='button' id='input2' value='+' onclick="addRow('dataTable')" />
</TD>
</TR>
</TBODY>
</TABLE>
</div>
Пример: jsfiddle
