I Add/Remove dynamic rows in HTML table. With this code I can dynamically add and remove rows. I want to add a row with an input value in the 1st row as if I input 'debasish' it will append next row with value 'debasish'. But with append row with blank value.
How can I append the row with the input value?
<html>
<head>
<title>Add/Remove dynamic rows in HTML table</title>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
clearForm();
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount<=1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form action="#" method="post">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row"
onclick="deleteRow('dataTable')" />
<table id="dataTable" width="550px" border="1">
<tbody>
<thead>
<tr>
<th>Select </th>
<th>Name</th>
</tr>
</thead>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td><input type="text" name="name"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
If you only want to get the value from the input in the first row, use the following:
case "text":
newcell.childNodes[0].value = table.rows[1].cells[1].querySelector("input").value;
break;
Demo
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = table.rows[1].cells[1].querySelector("input").value;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
//clearForm();
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
<form action="#" method="post">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="550px" border="1">
<tbody>
<thead>
<tr>
<th>Select </th>
<th>Name</th>
</tr>
</thead>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td><input type="text" name="name"></td>
</tr>
</tbody>
</table>
</form>
Related
I have created Dynamic Table for adding and deleting rows using HTML and JavaScript.
How to submit or export the dynamic data into excel sheet by using javaScript please give me help.
Here is my code..
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<INPUT type="button" value="Submit" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>Employee Name</TD>
<TD><input type="text"name="ename"/></TD>
<TD>Employee Id</TD>
<TD><input type="text"name="eid"/></TD>
<TD>Employee Date of Joining</TD>
<TD><input type="date" name="edoj"/></TD>
<TD>Employee Designation</TD>
<TD>
<SELECT name="edesignation">
<OPTION value="aset">Assistant Software Engineer Trainee</OPTION>
<OPTION value="ase">Assistant Software Engineer</OPTION>
<OPTION value="asse">Assistant Systems Engineer</OPTION>
<OPTION value="asa">Assistant Systems Analyst</OPTION>
<OPTION value="ita">IT Analyst</OPTION>
<OPTION value="eng">Engineer</OPTION>
<OPTION value="se">Software Engineer</OPTION>
<OPTION value="sse">Systems Engineer</OPTION>
</SELECT>
</TD>
<TD>Employee Salary</TD>
<TD><input type="text"name="esalary"/></TD>
</TR>
</TABLE>
</BODY>
</HTML>
I am trying to remove checked row from dynamic user input table , but it never works. Here is the code
function addRow(tableID){
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
if(rowCount<5){
var row=table.insertRow(rowCount);
var colCount=table.rows[0].cells.length;
for(var i=0; i<colCount; i++){
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum number of extra data is 5.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot remove all.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
<p>
<input type="button" value="Add Option" onClick="addRow('dataTable')"/>
<input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
<table id="dataTable" >
<tbody>
<tr>
<p>
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked" />
</td>
<td>
<label>Name of Data:</label>
<input type="text" name="dataName">
</td>
<td>
<label>Data:</label>
<input type="text" name="data">
</td>
</p>
</tr>
</tbody>
</table>
The add function works fine, but delete function doesn't work. Could someone tell me what happened?
You almost done.
There are a few issues:
You have a blank space after <td> and before <input>. So, your <input> becomes as the second child:
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
It should be:
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
Otherwise, you can change childNodes[0] to childNodes[1].
Also, why do you have <p> before and after <td>? remove them.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 5) {
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
} else {
alert("Maximum number of extra data is 5.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot remove all.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
<input type="button" value="Add Option" onClick="addRow('dataTable')" />
<input type="button" value="Remove Option" onClick="deleteRow('dataTable')" />
<table id="dataTable">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Name of Data:</label>
<input type="text" name="dataName"> </td>
<td>
<label>Data:</label>
<input type="text" name="data"> </td>
</tr>
</tbody>
</table>
These are good answers, but better yet is to replace .childNodes[0] with .children[0] because you are only interested in elements, that way you don't have to worry about spaces and other sneaky stuff like that. You can read about it here : What is the difference between children and childNodes in JavaScript?
Made a change from
var chkbox = row.cells[0].childNodes[0];
to
var chkbox = row.cells[0].childNodes[1];
It is working now.
function addRow(tableID){
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
if(rowCount<5){
var row=table.insertRow(rowCount);
var colCount=table.rows[0].cells.length;
for(var i=0; i<colCount; i++){
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum number of extra data is 5.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[1];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot remove all.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
<p>
<input type="button" value="Add Option" onClick="addRow('dataTable')"/>
<input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
<table id="dataTable" >
<tbody>
<tr>
<p>
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Name of Data:</label>
<input type="text" name="dataName">
</td>
<td>
<label>Data:</label>
<input type="text" name="data">
</td>
</p>
</tr>
</tbody>
</table>
I need help in deleting the row one by one from the bottom of the table on clicking the delete row button.
Issue:
I have used the javascript function to delete a row from my table, instead of deleting the row one by one from the bottom it is getting deleted as a whole except the first 2 rows. I need to delete the rows from the bottom one by one except the first 2 rows when the delete button is clicked .
This is my code
<html>
<head>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br/>
<br/>
<table id="dataTable" align="center" width="350px" border="1">
<tr>
<th> Product Name</th>
<th>Quantity</th>
<th> Brand</th>
</tr>
<tr>
<td> <input type="text" name="pname"/></td>
<td><input type="text" name="qty"/></td>
<td><select name="brand"/>
<option value="select">SELECT</option>
</select>
</td>
</table>
</form>
</body>
</html>
this help you :
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowDelete = table.rows.length - 1;
if (rowDelete > 1)
table.deleteRow(rowDelete);
else
alert("Cannot delete all the rows.")
}
catch(e) {
alert(e);
}
}
final code :
<html>
<head>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowDelete = table.rows.length - 1;
if (rowDelete > 1)
table.deleteRow(rowDelete);
else
alert("Cannot delete all the rows.")
}
catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br/>
<br/>
<table id="dataTable" align="center" width="350px" border="1">
<tr>
<th> Product Name</th>
<th>Quantity</th>
<th> Brand</th>
</tr>
<tr>
<td> <input type="text" name="pname" value="" /></td>
<td><input type="text" name="qty" value=""/></td>
<td><select name="brand"/>
<select>
<option value="select">SELECT</option>
</select>
</td>
</table>
</form>
</body>
</html>
Before going to the loop deleting the rows, you should check first the number of rows. or you can remove the loop since you are just deleting one row only which is the last row (rowCount-1);
Try this:
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount > 2){
//for(var i =1; i < 2; i++) {
// var row = table.rows[i];
table.deleteRow(rowCount-1);
//}
}
else{
alert("Cannot delete all the rows.");
}
}
catch(e) {
alert(e);
}
}
Here is the working code, you didnt break the execution after deleting a row, thats why it was deleting all the rows
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
else{
table.deleteRow(i);
rowCount--;
i--;
break;
}
}
}
catch(e) {
alert(e);
}
}
See if this Helps :
$('#tbl1').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
})
$('p input[type="button"]').click(function () {
$('#tbl1').append('<tr><td><input type="text" class="txtBox" /></td><td><input type="button" value="X" /></td></tr>')
});
Here is something to work with an HTML Snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" style="border: 1px solid blue">
<tr>
<td>
<input type="text" class="txtBox" />
</td>
<td>
<input type="button" value="X" />
</td>
</tr>
</table>
<p>
<input type="button" value="Add">
</p>
I have a form for Purchase Requisition and I created 3 chained select box (category, subcategory, product description) my reference to create those chained select boxes is this website http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/ the problem is that I want to request many products the question is how? and I want to put all of that I requested in database. Somehow I found codes they used javascript but the only working row is the first row only. When I select eg. Category: Office Supplies all of the subcategory select box(rows) are affected. Here is my code:
<html>
<head>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").attr("disabled","disabled");
$("select#type").html("<option>wait...</option>");
var id = $("select#category option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
$("select#desc").attr("disabled","disabled");
$("select#type").change(function(){
$("select#desc").attr("disabled","disabled");
$("select#desc").html("<option>wait...</option>");
var id = $("select#type option:selected").attr('value');
$.post("select_desc.php", {id:id}, function(data){
$("select#desc").removeAttr("disabled");
$("select#desc").html(data);
});
});
$("form#select_form").submit(function(){
var cat = $("select#category option:selected").attr('value');
var type = $("select#type option:selected").attr('value');
var descr = $("select#desc option:selected").attr('value');
if(cat>0 && type>0 && descr>0)
{
var result = $("select#desc option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
return false;
});
});
</script>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<?php include "select.class.php"; ?>
<form id="select_form">
<input type="button" value="Add" onclick="addRow('tableID')" />
<input type="button" value="Delete" onclick="deleteRow('tableID')"
/>
<table id="tableID">
<tr>
<td></td>
<td>Category</td>
<td>SubCategory</td>
<td>Product Description</td>
</tr>
<tr>
<td><input type="checkbox" name="chkbox[]" /></td>
<td>
<select id="category" name="category[]">
<?php echo $opt->ShowCategory(); ?>
</select>
</td>
<td>
<select id="type" name="type[]">
<option value="0">choose...</option>
</select>
</td>
<td>
<select id="desc" name="desc[]">
<option value="0">choose...</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="confirm" />
</form>
<div id="result" name="result[]"></div>
</body>
</html>
Please I need help!
I have a html table and insert a new row with table.insertRow(), but the new row doesn't have any attributes or formatting applied. How can I add a row to the table with row formatting?
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="100%" align="center">
<TR align="center" border="1">
<TH></TH>
<TH>ID </TH>
<TH>Name</TH>
<TH>Status</TH>
</TR>
<TR align="center">
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" value="Submission 1" /> </TD>
<TD>Working version</TD>
</TR>
</TABLE>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
I found it's better to use jquery to add rows to tables
$('#dataTable tr:last').after('<TR align="center"><TD><INPUT type="checkbox" name="chk"/></TD><TD>'+ rowCount + '</TD><TD> <INPUT type="text" value="Submission 1" /> </TD><TD>Working version</TD></TR>');
To set the class name for a tablerow you simply need to edit the className attribute as done below
<script>
var table = document.getElementById("tableID");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
row.className = "rowdiv";
</script>
Considering insertRow() is usually where you put the index, and var row = table.insertRow(rowCount); is used here, how can you move it to specific part of the table?