Here I am adding rows dynamically in table when user clicks "AddNewRow" button.
Here is the code for adding rows dynamilly,
<script type="text/javascript">
function addRow() {
var table = document.getElementById("modaltable"); //Table ID
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].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 "Comment":
newcell.childNodes[i].value = "";
break;
case "DropDownList2":
newcell.childNodes[i].selectedIndex = 0;
break;
case "DropDownList1":
newcell.childNodes[i].selectedIndex = 0;
break;
}
}
}
</script>
Button code for adding rows.
Add New Row
When I click "Addnewrow" button it will add another row dynamically. But here it is adding the row but row is taking the first row value as default. But I don't need first row selected values in another rows. Any mistake in the above code.
The new rows value is repeated because of this line
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
new cell value is copied from existing rows cell value.
so just refer to this line to update the new rows cell value, like this
newcell.innerHTML = 'newVal'+(i+1);
Live Demo # JSfiddle
If you don't need first row selected values in the new dynamically generated rows, you need to replace the following code:
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
with
newcell.innerHTML = "";
Related
I create a table from a JS to add more row
function addItem(code,name) {
var tblList = document.getElementById("list_inventory");
var tblBody = tblList.tBodies[0];
var lastRow = tblBody.rows.length;
var row = tblBody.insertRow(lastRow);
var newCell = row.insertCell(0);
newCell.innerHTML = lastRow+1;
var newCell = row.insertCell(1);
newCell.innerHTML = name+"<input type='hidden' name='code[]' id='code[]' value='"+code+"' />";
}
But the problem is I need to make a table ascending by 'name' whenever I create more row? Is it possible?
Of course it's possible. After you inserted:
var rows = tblBody.rows;
rows.sort(function(a,b) {
var first = a.cells[0].children[0].name;
var second = b.cells[0].children[0].name;
return (first.name < second.name) ? 1 : ((first.name > second.name) ? -1 : 0);
});
tblBody.rows.innerHTML = rows;
So the idea is to pick the rows and then sort it by input name prop. Hope it'll help you.
I have this JS code to add and remove table rows when user clicks a button. Adding rows works like a dream. My issue is the user clicks the Delete button, all but the first row is deleted. I only want the last row to be deleted, say if they add to many rows.
EDIT
I have tryed this
function deleteRow(tableID) {
var table = document.getElementById(tableID);
if(table.rows.length <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the fields.");
break;
}
table.deleteRow(table.rows.length -1);
}
But when i take the loop out the Add button no longer works...
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 50){ // limit the user from creating fields more than your limits
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 Unit limit 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];
if(rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the fields.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
</script>
To delete the last row of the table you can use this.
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
table.deleteRow(rowCount -1);
}
You dont need a for loop, this code will work:
function deleteRow(tableID) {
var table = document.getElementById(tableID);
if(table.rows.length <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the fields.");
break;
}
table.deleteRow(table.rows.length -1);
}
Hello i try to generate a table with only one column. So my Links get displayed in only one column.
Here is my function:
function createTableForPdfFiles() {
//To Create The Table
var table = document.createElement("table");
table.setAttribute('id', 'pdfTable');
table.setAttribute('class', 'AANTable');
// insert Title Row
var TitleRow = table.insertRow();
var cell = TitleRow.insertCell();
cell.setAttribute('class', 'AANTitleRow');
cell.setAttribute('colSpan', pdfFiles.length + 1);
cell.appendChild(document.createTextNode("Datenblätter"));
//Insert Table Rows
var pdfRow = table.insertRow();
var cell = pdfRow.insertCell(); //Where the PDF´s are displayed
cell.setAttribute('class', 'AANPdfRow');
for (var i = 0; i < pdfFiles.length; i++) {
var cell = pdfRow.insertCell();
var link = document.createElement("a");
link.setAttribute("href", "www.test.at" + pdfFiles[i].Link);
var linktext = document.createTextNode(pdfFiles[i].Link);
link.appendChild(linktext);
cell.appendChild(link);
cell.setAttribute('class', 'AANPdfCell');
}
$("#divTable").append(table);
}
Right now it looks like:
But i want it to look like:
So how i can i make that possibe? I tried to add another Row to the table but the debugger says not supported...... Any help would be really great.
thanks for your Time.
You have to create anew row foer each pdf.
Hae to put this
var pdfRow = table.insertRow();
var cell = pdfRow.insertCell(); //Where the PDF´s are displayed
cell.setAttribute('class', 'AANPdfRow');
Inside the for
take a look at this -> fiddle
I am adding new rows like this:
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
var row = table.insertRow(2);
var colCount = table.rows[3].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = able.rows[3].cells[i].innerHTML;
}
I don't want to loose input field data when refresh is done so, I use php session like these:
isset($_POST['details'])?$_SESSION['details'] = $_POST['details']:$_SESSION['details']="";
when I refresh and return same page session hold the previous data.
My problem is when i click add row button it generates same(previously inserted) data in new row also.
So I want to ask how to clear the data in new row. I think I need to have some code here:
for (var i = 0; i < colCount; i++) {
//need some code here to clear the field in newly created fields
var newcell = row.insertCell(i);
newcell.innerHTML = able.rows[3].cells[i].innerHTML;
}
How can I apply an element ID to a newly created element through JavaScript DOM?
The code I have written creates a table which is triggered from a button.
I need to apply a unique ID to this table so it can be styled differently to others which appear on my site.
Here is a sample of my code:
var tab = document.createElement("ViewShoppingCart");
document.getElementById("shopping_list").appendChild(tab);
var tbdy = document.createElement("tbody");
tab.id = "new_cart";
tab.appendChild(tbdy);
new_cart = true;
var total = 0;
for (var a = 0; a <= nameArray.length-1; a++) {
var tr = document.createElement("tr");
tbdy.appendChild(tr);
var td = document.createElement("td");
td.appendChild(document.createTextNode("x " + quantityArray[a]));
tr.appendChild(td);
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(nameArray[a]));
tr.appendChild(td2);
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(sumArray[a]));
tr.appendChild(td3);
}
Try
var tbdy = document.createElement("tbody");
tbdy.id = "newtbodyid";
tab.id = "new_cart";
tab.appendChild(tbdy);
new_cart = true;
For applying styles consider using class selectors, you may not need IDs at all.
Note that if you want to create valid HTML you can't have duplicated IDs that significantly lessens value for CSS styles, especially for table data.