使用JavaScriptdynamic添加/删除表格行
我试图添加/删除这个例子和这个例子中的表行。
这是我的代码：
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"; }
现在，你可以看到，在我的表格中，我有文本字段和button。 我想要的是：
-
只是重复行的结构。 我现在不能这样做，因为innerHTM只是文本。 我如何插入文本框或标签？
-
文本字段的id也应该不同，因为我稍后将检索值放入数据库中。
-
我想要增加一个function来增加POI的数量
任何人都可以帮我吗？
你可以克隆具有input的第一行，然后得到嵌套的input并更新它们的ID来添加行号（并且对第一个单元格做同样的操作）。
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 ); }
例如： http : //jsfiddle.net/7AeDQ/
这似乎比上面的答案更清洁…
<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>
简单的Javascript添加更多具有删除function的行
干杯！
<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>
1＆2：innerHTML可以使用HTML和文本。 你可以做这样的事情：
c1.innerHTML = "<input size=25 type=\"text\" id='newID' readonly=true/>";
可能或不可能是最好的方法，但是你可以这样做。
3：我只是使用一个全局variables来保存POI的数量，每次增加/减less。
如果你在每一行上放一个删除button，那么：
<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); }
这个代码可能会有帮助
<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>
我使用了上面提到的一些解决scheme，以及其他post的解决scheme，为包含input字段的dynamic表提供了一个工作解决scheme。 我这样做是因为它可能会帮助find这个线程后find相同的东西，导致我，因为接受的答案（和相关联的jsfiddle）实际上并不工作！ 也就是说，在插入/删除大量数据之后，它不会正确地对表格行进行索引。 关键问题是如何唯一索引dynamic行数据，这是可能的一点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，但是你不能在input字段上使用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个小时拼凑起来。
Javascriptdynamic添加表格数据。
脚本
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
