Develop Reference

Adding button to dynamically generated HTML table

I am trying to add a button for each row of the dynamically generated HTML table using JavaScript. Here is my code:
// helper function
function addCell(tr, text) {
var td = tr.insertCell();
td.innerHTML = text;
return td;
}
// insert data
list.forEach(function (item) {
var row = table.insertRow();
var button = document.createElement('button');
var bText = document.createTextNode('View');
button.appendChild(bText);
addCell(row, item.itemName);
addCell(row, '$ ' + item.total.toFixed(2));
addCell(row, button);
});
I managed to print out all other fields except the button. The column for the button just simply printed out this:
[object HTMLButtonElement]
Just wondering if there is anyway to add a image button to the dynamically generated table? Upon selecting the button, I wanted to get the value of the row and pass as parameter to another function as well.

Here the fiddle. What you want i dont know. This way you can reach the line.
var previousitem=null;
function removeRowbyItem(item) {
item.parentElement.parentElement.style.backgroundColor="red";
if(previousitem!=null){
previousitem.style.backgroundColor="";
console.log(previousitem);
}
previousitem=item.parentElement.parentElement;
}
removeRow.innerHTML = "click me";
removeRow.onclick = function() {
removeRowbyItem(this);
};

You can use td.appendChild(button);
function addCell(tr, text) {
var td = tr.insertCell();
td.innerHTML = text;
return td;
}
//for append button
function addButtonToCell(tr, button) {
var td = tr.insertCell();
td.appendChild(button);
return td;
}
// insert data
list.forEach(function (item) {
var row = table.insertRow();
var button = document.createElement('button');
var bText = document.createTextNode('View');
button.appendChild(bText);
addCell(row, item.itemName);
addCell(row, '$ ' + item.total.toFixed(2));
addButtonToCell(row, button);
});

How to numbering div?

Can you help me plz. In my code i create elements(div) with table elements in it.
When i put "blue_button" - creates a new div with table in it. The table has 5 td rows. I need to numbering only 1st rows. I mean when i put blue_button twice, the first row in first table in first div - has number 1, the second(i need) must have number 2 (for example).
I "broke my brains". Help plz.
Here is my code:
var unitTableTrTd_1 = [];
var unit = document.createElement('div');
var unitTable = document.createElement('table');
unit.appendChild(unitTable);
var unitTableTr = document.createElement('tr');
unitTable.appendChild(unitTableTr);
var unitTableTrTd_1 = document.createElement('td');
var td_1_p = document.createTextNode("1");
unitTableTrTd_1.appendChild(td_1_p);
unitTableTr.appendChild(unitTableTrTd_1);
var unitTableTrTd_2 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_2);
var unitTableTrTd_3 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_3);
var unitTableTrTd_4 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_4);
var unitTableTrTd_5 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_5);
unit.id = "block";
wrapper.appendChild(unit);

Its very simple,
take a global variable table_index ( outside button click's callback )
var table_index = 0;
now on each button click's callback increment the table_index by 1, and use it;
table_index++;
var td_1_p = document.createTextNode( table_index );

jQuery Add row to table with dynamic ids'

http://jsfiddle.net/waH5S/6/
function add_row_retail() {
$(document).ready(function () {
var table = document.getElementById("Retail");
var row = table.insertRow(-1);
var row_id = $('#Retail').val('tr[id]:last');
console.log(row_id);
var cell_init = row.insertCell(-1);
cell_init.innerHTML = "blank";
});
}
I am trying to get the id of the table row(<tr>) before the added row, and then add 1 to this, with proper parseint(...). Then doing the same with the cell (<td>) next, so that every cell has a unique id for each table. I can't seem to find the row's id.
HERE IS THE "CORRECT" CODE FOR MY QUESTION
function add_row_retail() {
var table = document.getElementById("Retail");
// Row id
var row_id = $('#Retail tr:last').attr('id');
var row = table.insertRow(-1);
var next_row_id = "tr_" + (1+parseInt(row_id.match(/\d+/)[0],10));
$(row).attr('id', next_row_id);
for (var i = 0; i < 8; i++) {
var cell_id = $('#Retail td:last').attr('id');
console.log(cell_id);
var next_cell_id = "td_" + (1+parseInt(cell_id.match(/\d+/)[0],10)); console.log(next_cell_id);
var cell = row.insertCell(-1);
$(cell).attr('id', next_cell_id);
$(cell).innerHTML = "blank";
}
}

Rather than $('#Retail').val('tr[id]:last'); I think you want:
var row_id = $('#Retail tr:last').attr('id')
This selector finds the last tr under the #Retail element, and returns its id attribute.
jQuery last selector: http://api.jquery.com/last-selector/
Next problem: IDs cannot start with numbers. Rename your IDs like "tr_1", "tr_2", etc.
Next problem: To extract the numbers from a string:
"tr_123".match(/\d+/)[0]; // returns 123.
Add 1 to it:
var next_id = "tr_" + (1+parseInt("tr_123".match(/\d+/)[0],10));
Then, set your new id.
var row = table.insertRow(-1);
...
$(row).attr('id', next_id);

Select tag in TD

I have select tag within a cell in the table. I want to add a new row only if the option is selected in the previous rows. I just want to know how to achieve it using DOM.
This is my addRow javascript function
function addRow()
{
var newRow = document.all("estTable").insertRow();
var tblObj = document.getElementById("estTable");
var noOfRow = document.getElementById("estTable").rows.length;
var oCell = newRow.insertCell();
oCell.innerHTML = tblObj.rows[1].cells[0].innerHTML;
oCell.childNodes[0].selectedIndex =0;
oCell = newRow.insertCell();
oCell.innerHTML = tblObj.rows[1].cells[1].innerHTML;
oCell.childNodes[0].selectedIndex =0;
oCell = newRow.insertCell();
oCell.innerHTML = tblObj.rows[1].cells[2].innerHTML;
}

Your new code would use:
var objParent = document.getElementById("someUniqueId");
Where someUniqueId is the row you want to get the parent of. From here you can access the parent anyway you want to.

Delete the row you click on (Javascript dynamic table)

I want to delete a row from a table, I am using Javascript.
I am dynamically creating table rows and in the last cell I have delete button so how to make it delete the row?
var newData4 = document.createElement('td');
var delButton = document.createElement('input');
delButton.setAttribute('type', 'button');
delButton.setAttribute('name', 'deleteButton');
delButton.setAttribute('value', 'Delete');
newData4.appendChild(delButton);
newRow.appendChild(newData4);
this is the function for creating my table rows
function addItem()
{
document.getElementById('add').onclick=function()
{
var myTable = document.getElementById('tbody');
var newRow = document.createElement('tr');
//var element1 = document.createElement("input");
//element1.type = "checkbox";
//newRow.appendChild(element1);
var newData1 = document.createElement('td');
newData1.innerHTML = document.getElementById('desc').value;
var newData2 = document.createElement('td');
newData2.innerHTML = document.getElementById('taskPriority').value;
var newData3 = document.createElement('td');
newData3.innerHTML = document.getElementById('taskDue').value;
myTable.appendChild(newRow);
newRow.appendChild(newData1);
newRow.appendChild(newData2);
newRow.appendChild(newData3);
var newData4 = document.createElement('td');
var delButton = document.createElement('input');
delButton.setAttribute('type', 'button');
delButton.setAttribute('name', 'deleteButton');
delButton.setAttribute('value', 'Delete');
newData4.appendChild(delButton);
newRow.appendChild(newData4);
}
}

function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
try this code here is fiddle
alternatively try
//delete the table row
$(document).on('click', '#del', function(){
$(this).parents('tr').remove();
});
}); //del is the id of the delete block
one pure javascript approach
function deleteRowUI(btndel) {
var table=document.getElementById('filterTableBody');
if (typeof(btndel) == "object") {
p=btndel.parentNode.parentNode;
p.parentNode.removeChild(p);
var oTable = document.getElementById('filterTableBody');
//gets rows of table
var rowLength = oTable.rows.length;
for (var i = 1; i < rowLength; i++){
var oCells = oTable.rows.item(i).cells;
//gets cells of current row
var cellLength = oCells.length-1;
for(var j = 0; j < cellLength; j++){
oCells.item(j).innerHTML = "";
break;
}
break;
}
} else {
return false;
}
}

if you want to temporary hidden it you can do:
this.parentNode.style.display='none';
in mind that the exclusion button is in a td.
But if you want to really delete it from the html and the database:
you need to make the same as above and a extra call to a function of php/plsqlwathever to delete from de db, i recommend using ajax to call it.
http://www.w3schools.com/ajax/default.asp

uses jQuery remove method to do it.
By the id attribute :
$("#id here").remove();
By the class attribute :
$(".class name here").remove();
I hope I've helped a little...