Increment my input text id when table row is cloned using Javascript - javascript

I am having a table it contains only one row. Row has a lot of elements like textboxs and buttons. When I click the button the table row will be cloned using append() function. My problem is when I click the button I want to increment the textbox and button id. How can I do this?
Example HTML:
<tr id="items:1">
<td id="id">
<input type="text" id="price:1" name="price" value="" size="6" readonly="readonly" />
</td>
<td id="id">
<input type="text" id="quantity:1" name="quantity" size="10" align="middle" onblur="totalprice(this)" />
</td>
<td id="id">
<input type="text" id="total:1" name="total" size="10" value="0" readonly="readonly" align="middle" />
</td>
<td id="id">
<input type="button" onclick="cloneRow()" id="button:1" value="ADD" />
</td>
</tr>
Example JavaScript:
function cloneRow() {
var row = document.getElementById("items:1");
var table = document.getElementById("particulars");
var clone = row.cloneNode(true);
var rowId = "items:" + a.toString();
clone.id = rowId;
var tabledataid = document.getElementById("id");
var inputtext = tabledataid.getElementsByTagName("input");
var inputtextid = inputtext[a];
var changeInputTextid = "price:" + b.toString();
inputtextid.id = changeInputTextid;
alert(changeInputTextid);
table.appendChild(clone);
a++;
}

A fiddle
Create a function to add rows and just use the indexes of text boxes and columns correctly
function insertRow() {
var x = document.getElementById('ttable');
var new_row = x.rows[0].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 = '';
x.appendChild(new_row);
}

Related

prevent added tables from disappearing when page is refreshed

basically, when user entered some values in each added rows, those values and the number of added rows don't disappear... how is that possible?
here's my code:
function delPlace(row) {
var txtb = document.getElementById('travel');
var len = txtb.rows.length;
if (len > 2) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('travel').deleteRow(i);
} else {
alert("Can't delete all rows. One row must at least remain.");
}
}
function addPlace() {
var txtb = document.getElementById('travel');
var add_row = txtb.rows[1].cloneNode(true);
var len = txtb.rows.length;
add_row.cells[0].innerHTML = len;
var inp = add_row.cells[1].getElementsByTagName('input')[0];
inp.id += len;
inp.value = '';
txtb.appendChild(add_row);
}
<table id="travel">
<p> List the countries/cities the person had traveled to/from in the past 15 days before diagnosis </p>
<tr><input type="button" id="add_place" value="Add" onclick="addPlace()" /></tr>
<tr>
<td style="display:none"></td>
<td>
<input type="text" class="form-control" name="travel_history[]" value="" placeholder="Enter text here..."
style="width:500px">
</td>
<td>
<input type="button" id="del_place" value="Remove" onclick="delPlace(this)" />
</td>
</tr>
</table>
</div>

Using JavaScript to add new row to table but how to I set the variables to be unique if I clone?

I have a button that the user clicks on to add a new row to the bottom of an input table. I would like this to also increment the id. So the next row would have desc2, hours2, rate2 and amount2 as the id. Is there a way to do this in the JavaScript function.
Also - just want to check my logic on this. After the user completes the filled out form, I will be writing all the data to a mysql database on two different tables. Is this the best way to go about this? I want the user to be able to add as many lines in the desc_table as they need. If this is the correct way to be going about this, what is the best way to determine how many lines they have added so I can insert into the db table using a while loop?
JS file:
function new_line() {
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
}
HTML:
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td ><textarea name="description" id="desc1" ></textarea></td>
<td> <input type="text" name="hours" id="hours1" ></td>
<td> <input type="text" name="rate" id="rate1"></td>
<td><input type="text" name="amount" id="amount1"></td>
<td>
<button type="button" name="add_btn" onclick="new_line(this)">+</button>
<button type="button" name="delete_btn" onclick="delete_row(this)">x</button>
</td>
</tr>
</table>
Thank you!
Check this code.After appending the row it counts the number of rows and and then assigns via if condition and incremental procedure the id's:
function new_line() {
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
for(var i=1;i<rows.length;i++){
if(rows[i].children["0"].children["0"].id.match((/desc/g))){
rows[i].children["0"].children["0"].id='desc'+i;
}
if(rows[i].children["1"].children["0"].id.match((/hours/g))){
rows[i].children["1"].children["0"].id='hours'+i;
}
if(rows[i].children["2"].children["0"].id.match((/rate/g))){
rows[i].children["2"].children["0"].id='rate'+i;
}
if(rows[i].children["3"].children["0"].id.match((/amount/g))){
rows[i].children["3"].children["0"].id='amount'+i;
}
}
}
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td ><textarea name="description" id="desc1" ></textarea></td>
<td> <input type="text" name="hours" id="hours1" ></td>
<td> <input type="text" name="rate" id="rate1"></td>
<td><input type="text" name="amount" id="amount1"></td>
<td>
<button type="button" name="add_btn" onclick="new_line(this)">+</button>
<button type="button" name="delete_btn" onclick="delete_row(this)">x</button>
</td>
</tr>
</table>
Please change variable names for more descriptive. :)
Example solution...
https://jsfiddle.net/Platonow/07ckv5u7/1/
function new_line() {
var table = document.getElementById("desc_table");
var rows = table.getElementsByTagName("tr");
var row = rows[rows.length - 1];
var newRow = rows[rows.length - 1].cloneNode(true);
var inputs = newRow.getElementsByTagName("input");
for(let i=0; i<inputs.length; i++) {
inputs[i].id = inputs[i].name + rows.length;
}
var textarea = newRow.getElementsByTagName("textarea")[0];
textarea.id = textarea.name + rows.length;
table.appendChild(newRow);
}
Note that I removed/edited below fragment.
x.style.display = "";
r.parentNode.insertBefore(x, r);
You could do this a lot easier with jquery or another dom manipulation language, but with vanilla JS here's an example of simply looping through the new row's inputs & textarea and incrementing a counter to append.
var count = 1;
function new_line() {
count++;
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
// update input ids
var newInputs = Array.from(x.getElementsByTagName('input'))
.concat(Array.from(x.getElementsByTagName('textarea')));
newInputs.forEach(function(input) {
var id = input.getAttribute('id').replace(/[0-9].*/, '');
input.setAttribute('id', id + count);
});
}
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td ><textarea name="description" id="desc1" ></textarea></td>
<td> <input type="text" name="hours" id="hours1" ></td>
<td> <input type="text" name="rate" id="rate1"></td>
<td><input type="text" name="amount" id="amount1"></td>
<td>
<button type="button" name="add_btn" onclick="new_line(this)">+</button>
<button type="button" name="delete_btn" onclick="delete_row(this)">x</button>
</td>
</tr>
</table>

How to edit and delete the row in Javascript?

When I click table row, that row value will display the below text box, then I click + button to copy the first row values and insert new row and place value correctly.
When I click edit button # that value again place to first row. How to find that row index. How to get the particular ID?
<script>
function insRow()
{
var x=document.getElementById('scrolltable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
var code=document.getElementById('code').value;
var product=document.getElementById('product_name').value;
var qty=document.getElementById('quantity').value;
var rate=document.getElementById('amount').value;
var amount=document.getElementById('total').value;
var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = code;
var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = product;
var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
inp3.id += len;
inp3.value = qty;
var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
inp4.id += len;
inp4.value = rate;
var inp5 = new_row.cells[4].getElementsByTagName('input')[0];
inp5.id += len;
inp5.value = amount;
var button = new_row.cells[5].getElementsByTagName('input')[0];
button.value = "#";
button.onclick = function(it) {editRow(it)};
//cell4.appendChild(inp4);
x.appendChild( new_row );
document.getElementById('code').value='';
document.getElementById('product_name').value='';
document.getElementById('quantity').value='';
document.getElementById('amount').value='';
document.getElementById('total').value='';
document.getElementById('code').focus();
}
function deleteRow(row)
{
r=row.parentNode.parentNode;
r.parentNode.removeChild(r);
}
function editRow(evt) {
var x=document.getElementById('scrolltable');
//var l1 = evt.target.parentNode.parentNode;
//alert(l1);
var errorList = "";
var l=x.rows.length;
//var l=x.rowsIndex;
var y=l-1;
alert(l);
//alert("code"+y);
var code=document.getElementById('code'+y).value;
var product=document.getElementById('product_name'+y).value;
var qty=document.getElementById('quantity'+y).value;
var rate=document.getElementById('amount'+y).value;
var amount=document.getElementById('total'+y).value;
document.getElementById('code').value=code;
document.getElementById('product_name').value=product;
document.getElementById('quantity').value=qty;
document.getElementById('amount').value=rate;
document.getElementById('total').value=amount;
var i = evt.target.parentNode.parentNode.rowIndex;
document.getElementById('scrolltable').deleteRow(i);
}
</script>
My HTML code is:
<table class="table table-striped table-bordered dTableR" id="scrolltable">
<thead>
<tr>
<th width="10%">Code</th>
<th width="40%">Product</th>
<th width="10%">Total Qty</th>
<th width="10%">Rate</th>
<th width="12%">Amount</th>
<th width="10%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="code" class="span10" id="code" /></td>
<td><input type="text" name="product_name" class="span12" id="product_name" /></td>
<td><input type="text" name="quantity" class="span10" onBlur="calculate(this.value)" id="quantity" maxlength="8"/></td>
<td><input type="text" name="amount_name" class="span10" id="amount" /></td>
<td><input type="text" name="total_name" class="span10" id="total" maxlength="8" /></td>
<td><input type="button" id="addmorePOIbutton" style="width:25px;" value="+" onClick="insRow()"/>
<input type="button" id="delPOIbutton" style="width:25px;" value="-" onClick="deleteRow(this)"/></td>
</tr>
</tbody>
You can use jQuery for edit function :
First change
button.onclick = function(it) {editRow(it)};
to
button.onclick = function() {editRow(this)};
and change below function
function editRow(evt)
{
var $tr = $(evt).parents('tr'); // get parent tr
// put all values in top row
$('#code').val($tr.find('input[id^=code]').val());
$('#product_name').val($tr.find('input[id^=product_name]').val());
$('#quantity').val($tr.find('input[id^=quantity]').val());
$('#amount').val($tr.find('input[id^=amount]').val());
$('#total').val($tr.find('input[id^=total]').val());
// remove clicked tr
$tr.remove();
}
Working jsfiddle
Note : Please add jQuery js file to your html page.
since you are using jquery(as you have tagged this question with jquery), you can use index() function form jquery (http://api.jquery.com/index/).
Here is an updated (http://jsfiddle.net/6yXMF/) jsfiddle.
Which alerts index of the tr from which the input button is clicked.
Currently there are some issues in insertion and deletion or rows in your code. After resolving the issues you just can use the index function as demoed in
insRow() function.
Let me know if you have any queries.

add/remove multiple rows using checkbox with JQUERY

I have snippet in javascript that add/remove multiple rows within a table. I would like to implement the same thing into JQUERY. At the moment, the checkboxes does'nt work, but I would like them to work for the sake of userbility. I got no clue on jquery at moment. Would you help on the implementation.
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<link rel="stylesheet" type="text/css" href="addRemove.css"/>
<script language="JavaScript" type="text/javascript">
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
</script>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="Add Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="Delete Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
</BODY>
</HTML>
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/
$("#ADD").click(function(){
$("table").append($("tr:last").clone(true));
//clone the last row and add it to table
$("tr:last input").val("");
//reset all the inputs in the last row
});
$("#DEL").click(function(){
$("table tr input:checked").parents('tr').remove();
//find the rows with checked check boxes in them and remove them
});
SAMPLE
updated your code to this:
$("#btnAddRow").on("click",function(){
addRow('dataTable');
});
$("#btnDelRow").on("click",function(){
deleteRow('dataTable');
});
$("#btnAddChildRow").on("click",function(){
var index = $(this).closest('tr').index();
addChildRow(index,'dataTable');
});
$("#btnDelChildRow").on("click",function(){
var index = $(this).closest('tr').index();
deleteChildRow(index,'dataTable');
});
working fiddle here: http://jsfiddle.net/qN2Z8/5/ (check this fiddle)
i hope it helps.
Try following code
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<table id="POITable" border="1">
<tr>
<td>1</td>
<td><input type="checkbox" id="chck"/></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 Row" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorePOIbutton" value="Add Row" onclick="insRow()"/></td>
</tr>
</table>
<script>
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
var x=document.getElementById('POITable');
var new_row = x.rows[0].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 );
}
</script>
Link to fiddle here

submit two form contents onto one action page

i have two Forms to be submitted to a single destination page.
<form name= "form1" id="form1" action="final.php">
<input type="box1" name="box1" value="" >
</form>
<form name ="form2" id="form2" action="final.php">
<table>
<input type ="text" id="txt_1" name ="txt_1" value="">
...
</table>
</form>
<input type= "button" name="mybutton" id="mybutton" onclick="somefunction();">
here ,
form1 has some satic contents
and
form2 has a table which is dynamically generated by js...
problem is ...i want to submitted values from both the forms to same page final.php ...how cud i do it .....pls avoid jquery/ajax...
simple javascript welcomed ...
thanks in advance !
this is the js for generating dynamic table in form2
<script type="text/javascript">
function viewsource() {
alert(document.body.innerHTML);
}
</script>
<script type="text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var frm=document.form2;
if (!frm.ary) frm.ary=[frm.t1_1,frm.t1_2,frm.t1_3];
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// numberd row
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// Item row
var cellRight1 = row.insertCell(1);
var el1 = document.createElement('input');
frm.ary.push(el1);
el1.type = 'text';
el1.value = '';
el1.name = 't' + iteration + '_1';
el1.id = 't' + iteration + '_1';
el1.size = 13;
el1.onkeyup=Calc;
el1.onblur=Calc;
cellRight1.appendChild(el1);
// Price row
var cellRight2 = row.insertCell(2);
var el2 = document.createElement('input');
frm.ary.push(el2);
el2.type = 'text';
el2.value = '';
el2.name = 't' + iteration + '_2';
el2.id = 't' + iteration + '_2';
el2.size = 10;
el2.onkeyup=Calc;
el2.onblur=Calc;
cellRight2.appendChild(el2);
// Price row
var cellRight3 = row.insertCell(3);
var el3 = document.createElement('input');
frm.ary.push(el3);
el3.type = 'text';
el3.value = '0';
el3.name = 't' + iteration + '_3';
el3.id = 't' + iteration + '_3';
el3.size = 10;
cellRight3.appendChild(el3);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 3) tbl.deleteRow(lastRow - 1);
}
function formReset()
{
document.getElementById("form2").reset();
}
</script>
<script type="text/javascript">
function Calc(){
var frm=document.form2;
if (!frm.ary){ frm.ary=[frm.t1_1,frm.t1_2,frm.t1_3];}
for (var zxc0=0;zxc0<frm.ary.length;zxc0+=3)
{
var total =1;
if (frm.ary[zxc0].value.length>0&&!isNaN(frm.ary[zxc0].value))
{
total =frm.ary[zxc0].value*1* frm.ary[zxc0+1].value;
}
frm.ary[zxc0+2].value =total;
}
var sum1 =0;
for (var zxd0=0;zxd0<frm.ary.length;zxd0+=3)
{
if (frm.ary[zxd0+2].value.length>0&&!isNaN(frm.ary[zxd0+2].value))
{
sum1 +=parseInt(frm.ary[zxd0+2].value);
}
}
frm.sum.value = sum1;
}
</script>
<form action="final.php" method="post" name="form2" id="form2">
<imput type ="text" name ="temp" id="temp" >
<table border="2" border-color="#000000" border-type="solid" id="tblSample"
align="center" font-size="20">
<tr>
<th>
<input type="button" value="Add " onclick="addRowToTable();"></th><th>
<input type="button" value="Remove " onclick="removeRowFromTable();" /></th>
<th> <input type="button" value="Reset" onclick="formReset();">
</th>
</tr><br>
<tr id="cloneid" >
<td>
1.
</td>
<td>
<input type="text" name="t1_1" id="t1_1" size="16" value="0" onkeyup="Calc();"
onblur="Calc();">
</td>
<td>
<input type="text" name="t1_2" id="t1_2" size="16" value="0" onkeyup="Calc();"
onblur="Calc();">
</td>
<td>
<input type="text" name="t1_3" id="t1_3" value= "0" size="16">
</td>
</tr>
</table>
<table border="2" border-color="#000000" align="center">
<tr>
<td colspan="3" align="center">
Sum: <input type="text" name="sum" id="sum">
</td>
</tr>
</table>
</form>
<input type="button" name = "mybutton" id ="mybutton" value="set"
onclick="somefunction();">
}
and
form1 is same as mentioned including jquery for datetimepickers along witha couple of text boxes...
u can use Java Script
function button1click() {
yourForm.action = "Final.php";
yourForm.submit();
}
n in HTML
<form action='' method='post'>
..
</form>

Categories