Develop Reference

Possible way of using same function on two different divs?

I have addRow() and deleteRow() functions. I'm pasting the function twice for each of my choices (radio & checkbox). Is there any other way to lessen it?
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";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
}
function addRow1(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 = "radiobtn";
element1.name = "rdbtn[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
}

function addRow(tableID , inputType, inputName) {
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 = inputType;
element1.name = inputName;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
}
addRow(tableID, "checkbox", "chkBox[]"); //or
addRow(tableID, "radiobtn", "rdbtn[]");
You have to send your properties to your "addRow" function.
For a closer look read: https://medium.com/nodesimplified/javascript-pass-by-value-and-pass-by-reference-in-javascript-fcf10305aa9c

You could create a function to create the elements something like this:
/**
* #param {string} tagName The name of the element to create like "input" or "div"
* #param {Object<string, string> properties This object can be used to set properties on the
* element like its name or type.
* #param {Array<HTMLElement> [children=[]] An optional parameter to provided elements to be
* added as children to the created element.
*/
function createElement(tagName, properties, children = []) {
// Create the element
const element = document.createElement(tagName);
// Get all the properties names of the properties object, iterate over all of them and
// set the property in the element with the provided value.
Object.keys(properties).forEach(key => {
element[key] = properties[key]
});
// Append any childeren that may have been provided.
children.forEach(child => element.appendChild(child));
// Return the element.
return element;
}
const myElement = createElement('input', {
type: 'checkbox',
name: 'my-checkbox'
});
document.body.appendChild(myElement);

Getting information on a JS constructed button on click

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
}

Correct the serial numbers of the row after deletion using Javascript only

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;
}}

Trouble adding buttons to tables

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

Dynamically creating table rows and div's using document.createElement(“div”);

I am trying to dynamically parse JSON data and populate the data in rows in an html table.
I wrote the following test and don't really see any reason why it should not work.
EDIT:corrected the two syntax errors.
<tohead>
<script>
var zoho = "?({"Products":[{"model":"UN55F8000BFXZA","phone":"1234567890","price":"2999.99","manufacturer":"Samsung","purchaseDate":"2013-07-26"}]});"
$(document).ready(function(){
processRecord(zoho);
});
function addRow(inc) {
VAR table = document.getElementById("dataTable");
VAR rowCount = table.rows.length;
VAR row = table.insertRow(rowCount);
VAR cell1 = row.insertCell(0);
VAR element1 = document.createElement("div");
element1.id = 'manufacturer' + inc;
element1.class = "text";
cell1.appendChild(element1);
VAR cell2 = row.insertCell(1);
VAR element2 = document.createElement("div");
element2.id = 'purchaseDate' + inc;
element2.class = "text";
element2.align = "center";
cell2.appendChild(element2);
VAR cell3 = row.insertCell(2);
VAR element3 = document.createElement("div");
element3.id = 'endingDate' + inc;
element3.class = "text";
element3.align = "center";
cell3.appendChild(element3);
};
function processRecord(zoho_data){
for (var i=0; i<zoho_data.length; i++){
addRow(i);
var phonenumber = zoho_data.Products[i].phone;
var zmanufacturer = zoho_data.Products[i].manufacturer;
var zmodel = zoho_data.Products[i].model;
var zpurchaseDate = zoho_data.Products[i].purchaseDate;
document.getElementById('manufacturer' + i).appendChild(zmanufacturer);
document.getElementById('purchaseDate' + i).appendChild(zpurchaseDate);
document.getElementById('endingDate' + i).appendChild(d1);
}
};
</script>
</tohead>
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE id="dataTable" width="546">
</TABLE>
</BODY>
</HTML>
EDIT: In response to the comments I have reduced the complexity of the code above to narrow down the issue. The code below is the new code with just the createElement loop.
<HTML>
<HEAD>
<script>
$(document).ready(function(){
addRow();
});
function addRow() {
for (var i=0; i<4; i++)
{
VAR table = document.getElementById("dataTable");
VAR rowCount = table.rows.length;
VAR row = table.insertRow(rowCount);
VAR cell1 = row.insertCell(0);
VAR element1 = document.createElement("div");
element1.setAttribute('id', 'manufacturer' + i);
element1.setAttribute(class, 'text');
cell1.appendChild(element1);
VAR cell2 = row.insertCell(1);
VAR element2 = document.createElement("div");
element2.setAttribute('id', 'purchaseDate' + i);
element2.setAttribute(class, 'text');
element2.setAttribute(align, 'center');
cell2.appendChild(element2);
VAR cell3 = row.insertCell(2);
VAR element3 = document.createElement("div");
element3.setAttribute('id', 'endingDate' + i);
element3.setAttribute(class, 'text');
element3.setAttribute(align, 'center');
cell3.appendChild(element3);
}
};
</script>
</HEAD>
<BODY>
<TABLE id="dataTable" width="546" border="1">
<tr>
<td>boo</td>
</tr>
</TABLE>
</BODY>
</HTML>

Your zoho string is not an object, but a string, and as it starts with ?( it is not valid JSON. It is not even valid Javascript — just look at those errant quotation marks.
You need to fix your JSON so that it is valid JSON, and then you need to convert your JSON string into a Javascript object.
Then, you need to fix document.getElementById(dataTable) because no such variable dataTable exists in your program. Did you mean the string "dataTable"?

appendChild only works with actual DOM type one nodes. Since it looks like you're just appending string values, try using textContent =
See: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
If you want to append them as their own elements, you'll need to use: document.createElement so that appendChild will work (since it belongs to the Node object).

For the benefit of anyone who might see this and have a similar concern. The correct code is below. I am passing in the function data returned in JSON format parsing it, and writing it to dynamically created "div"s, inside dynamically created table rows.
function processData(zoho_data){
$.each(zoho_data.Products, function() {
var phonenumber = this.phone;
var zmanufacturer = this.manufacturer;
var zmodel = this.model;
var zpurchaseDate = this.purchaseDate;
var d1 = Date.parse(zpurchaseDate).add(4).year().toString('yyyy-MM-dd');
var table = document.getElementById("datatable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var element1 = document.createElement("div");
element1.setAttribute('class', 'text');
cell1.innerHTML = zmanufacturer + " " + zmodel;
cell1.appendChild(element1);
var cell2 = row.insertCell(-1);
var element2 = document.createElement("div");
element2.setAttribute('class', 'text');
element2.setAttribute('align', 'center');
cell2.innerHTML = zpurchaseDate;
cell2.appendChild(element2);
var cell3 = row.insertCell(-1);
var element3 = document.createElement("div");
element3.setAttribute('class', 'text');
element3.setAttribute('align', 'center');
cell3.innerHTML = d1;
cell3.appendChild(element3);
});
};