Is it possible to get information, such as the id, value, of a button created by a javascript loop? For example, the following code, which creates a button for each line in a table formed by an array of objects?
var table = document.createElement("TABLE");
table.setAttribute("id", "tableOfArray");
var array = [ (a large array of objects here) ];
for (var i = 0; i < array.length; i++)
{
row = table.insertRow(i);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell4 = row.insertCell(3);
cell5 = row.insertCell(4);
cell6 = row.insertCell(5);
cell1.innerHTML = i + 1; //for numbering the table
cell2.innerHTML = array[i].property1;
cell3.innerHTML = array[i].property2;
cell4.innerHTML = array[i].property3;
cell5.innerHTML = array[i].property4;
var button = document.createElement("BUTTON");
var buttonText = document.createTextNode("Remove Line");
button.appendChild(buttonText);
button.setAttribute("id", String(i));
button.setAttribute("value", String(i));
button.setAttribute("onClick", "remove()");
cell6.appendChild(button);
}
function remove()
{
?? //gets the value of the button that was pressed
var buttonValue = ??; //assigns the value of button to the variable
arrayTable = document.getElementById("tableOfArray");
table.deleteRow(buttonValue);
}
Is there a method that can be used to get the id or value of the button in order to perform the remove action?
you can pass the current context by passing this
button.setAttribute("onClick", "remove(this.id)");
function remove(id){
var _id=id;// id of the button;
}
Else you can use the event object
function remove(event){
var _target = event.target;
var _getId = _target.id;
var _getParentTD = _target.parentElement; // will give the td which contain button
var _getParentTR = _target.parentElement.parentElement; // will return tr
}
Related
I'm trying to add a onclick event to a newly dynamically created button inside a row cell in a table.
When I try to use the button this appears in the console:
"Uncaught ReferenceError: i is not defined"
How can I access the variable i to put it inside the parenthesis of the change() function?
cell9.innerHTML ='<input type = "button" value = "Edit" onclick="change(i)"/>';
Edit: So here is the entire function, i is a number that increases by 1 every time this function is used. The variable count is equal to the length of the table.
function save(){
var myTable = document.getElementById("myTable");
var i = count;
// Create an empty <tr> element and add it to the 1st position of the table:
var row = myTable.insertRow(myTable.rows.length);
row.id="row-"+i;
// Insert new cells (<td> elements)in the"new" <tr> element:
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
var cell6 = row.insertCell(6);
var cell7 = row.insertCell(7);
var cell8 = row.insertCell(8);
var cell9 = row.insertCell(9);
var cell10 = row.insertCell(10);
// Add some text to the new cells:
cell0.innerHTML = document.getElementById("fname2").value;
cell1.innerHTML = document.getElementById("lname2").value;
cell2.innerHTML = document.getElementById("cemail2").value;
cell3.innerHTML = document.getElementById("pnumber2").value;
cell4.innerHTML = document.getElementById("city2").value;
cell5.innerHTML = document.getElementById("address2").value;
cell6.innerHTML = document.getElementById("postalCode2").value;
cell7.innerHTML = document.getElementById("province2").value;
cell8.innerHTML = document.getElementById("cpwd2").value;
cell9.innerHTML ='<input type = "button" value = "Edit" onclick="change(i)"/>';
}
You have to inject the i into element by string concatenation or Template literals like below
cell9.innerHTML ='<input type = "button" value = "Edit" onclick="change('+ i + ')"/>';
or
cell9.innerHTML =`<input type = "button" value = "Edit" onclick="change(${i})"/>`;
A button , onclick , adds a table row with three cells. In the first cell theres a textbox where you input an image url, the second cell contains a button.When pressed the button shows the image that the url refers to on the third cell.
Doing this for one row is simply, but i cant get it to work for subsequent rows because the id of each element would remain the same.
I need some tips and ideas.
Code sample:
<script>
var u = 1;
function addRows() {
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id="ur" type="url" >';
cell2.innerHTML = '<button onclick="document.getElementById(\'im1\').src = document.getElementById(\'ur\').value;">Add Image</button>';
cell3.innerHTML = '<img id="im1" src="" alt="image">';
u++;
}
</script>
Each row generates fine and if you put in a url or the name of a local image file it will display properly on the third cell.
But it only works on the first generated row.
With this sort of thing you shouldn't be calling and duplicating ids but instead relying on Sibling properties. Nevertheless a quick hack would be to use your increment variable to give unique ids to the elements.
var u = 1;
function addRows(){
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id="ur'+u'" type="url" >' ;
cell2.innerHTML = '<button onclick="document.getElementById(\'im'+u'\').src = document.getElementById(\'ur'+u+'\').value;">Add Image</button>' ;
cell3.innerHTML = '<img id="im'+u+'" src="" alt="image">' ;
u++;
}
</script>
This should work:
function addRow() {
var table = document.getElementById("tab");
var row = document.createElement("tr");
var buttonTd = document.createElement("td");
var button = document.createElement("button");
button.type = "button";
button.innerHTML = "Show image";
buttonTd.appendChild(button);
var textboxTd = document.createElement("td");
var textbox = document.createElement("input");
textbox.type = "text";
textboxTd.appendChild(textbox);
var imageTd = document.createElement("td");
var image = document.createElement("img");
imageTd.appendChild(image);
row.appendChild(textboxTd);
row.appendChild(buttonTd);
row.appendChild(imageTd);
button.addEventListener("mousedown", function () {
image.src = textbox.value;
});
table.appendChild(row);
}
table,tr,td {
border: 1px solid black;
border-collapse: collapse;
}
<button onclick="addRow()">Add Row</button>
<table id="tab"></table>
I have two functions for adding and deleting rows in a table using Javascript:
function addRow() {
//document.getElementById("div_dea").style.display = "none";
document.getElementById("div_orderlist").style.display = "block";
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
var row = table.insertRow(rowcount);
row.id="row_"+rowcount;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
var sel = document.getElementById("select_product_name");
var optiontext = sel.options[sel.selectedIndex].text;
cell1.innerHTML = rowcount;
cell2.innerHTML = optiontext;
cell3.innerHTML = "abc";
}
Delete Row as follows:
function deleteRow(){
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
alert("first"+rowcount);
for(var i=1;i<rowcount;i++){
row = table.rows[i];
if(document.getElementById(row.id).style.backgroundColor =="red"){
table.deleteRow(row.rowIndex);
}
}
alert("second"+rowcount);
}
While addRow() I am adding serial numbers as: cell1.innerHTML = rowcount;
I need correct the serial numbers after deletion:
The rows get deleted But alert("second"+rowcount); not even working in deletion. How can correct the serial numbers of row after deletion.
Note: Use JavaScript only
Use this code
function updateRowCount(){
var table = document.getElementById("ordertable");
var rowcountAfterDelete = document.getElementById("ordertable").rows.length;
for(var i=1;i<rowcountAfterDelete;i++){
table.rows[i].cells[0].innerHTML=i;
}}
I want to insert two new rows when a row's top position exceeds a limit in pixel.
I've tried following code but its not working properly.
I'm adding these two rows for page break and repeating table header purpose.
Following is the print preview of this code ran:
The header should repeat at next page only.
var x = document.getElementsByTagName('tr');
var rowTopVal = 0;
var tIndex = 0;
var deductVal = 0;
var tableId = document.getElementById("testID");
for (var i = 0; i < x.length; i++) {
rowTopVal = x[i].position().top;
rowTopVal = rowTopVal - deductVal;
if (1200 < rowTopVal) {
tIndex = i;
var row = tableId.insertRow(tIndex);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "x";
cell2.innerHTML = "Y";
cell3.innerHTML = "z";
cell4.innerHTML = "P";
cell5.innerHTML = "q";
row.className = 'tableHeaderRepeat';
var row2 = tableId.insertRow(tIndex);
row2.className = 'tableHeaderRepeatBlank';
newRow1Height = parseInt($('.tableHeaderRepeatBlank').css('height'), 10);
newRow2Height = parseInt($('.tableHeaderRepeat').css('height'), 10);
deductVal = deductVal + rowTopVal - newRow1Height - newRow2Height;
}
}
Maybe you could try adding css property to your table headers? See CSS page break properties.
Example:
.tableHeaderRepeat { page-break-before: always; }
It should add a page break before every table header, so you only need to approximately calculate the position to start a new table. I'm not able to test this right now, but maybe it'll help.
I am trying to add several buttons to a table using javascript, however I keep being offered this result with [objectHTMLInputElement]
Here is my code:
function createDiseaseTable(country){
var displayCountry = document.getElementById("countrySelected");
displayCountry.innerHTML = country.name;
var diseaseTable = document.getElementById("diseases");
diseaseTable.innerHTML = "";
for (var i = 0; i<country.diseases.length; i++) ////////////////////////////////////
{
var changeDisease = document.createElement('input');
changeDisease.type = 'button';
changeDisease.name = "x"
changeDisease.onclick = hi();
var row = diseaseTable.insertRow(i);
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1)
var cell3 = row.insertCell(2)
var cell4 = row.insertCell(3)
var cell5 = row.insertCell(4);
cell1.innerHTML = OurDiseases[i].name;
cell2.innerHTML = OurDiseases[i].cureLevel;
cell3.innerHTML = OurDiseases[i].killLevel;
cell4.innerHTML = OurDiseases[i].cured;
cell5.innerHTML = changeDisease;
console.log(changeDisease);
}
var row = diseaseTable.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "Disease";
cell2.innerHTML = "Level needed to cure";
cell3.innerHTML = "Deaths each year";
cell4.innerHTML = "Cured";
cell5.innerHTML = "More Info";
}
Note: I'm not concerned about not running a function yet upon click, i just want the actual button to appear
you need to use the appendChild function
your code could than look like this:
...
cell5.appendChild(changeDisease);
...
You can find more details on this function here: http://www.w3schools.com/jsref/met_node_appendchild.asp
Update - see comment:
name is an attribute of an element and not the caption of the button, if you want to set the caption use the attribute value instead - here is an example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_button
It's been a long time since I've done DOM manipulation without jQuery, but I believe you need to do cell5.appendChild(changeDiseas) rather than .innerHTML (which is expecting an HTML string).
http://www.w3schools.com/jsref/met_node_appendchild.asp