We Keep Coding

Table getting appended on top of each other on click of button

I am having and input field where I am entering the ID and calling a function on click of a button and the content with that corresponding ID is fetched from csv file and gets populated in the table. The issue is when I am entering ID again in input field, I want previous table to get destroyed and new table has to be created corresponding to that ID, but the new table gets appended below the existing one. How can i fix it?
<div id="table-scroll" class="table-scroll">
<table id="data" class="main-table" style= "display: none;"></table>
</div>
function buildrow1(){
////////////////TABLE BUILD////////////
var table = document.getElementById("data");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML="<td>Item1</td>";
////////////////TABLE BUILD////////////
//HPlans creating the columns for row
var l;
var m;
for (l = 0; l < pid.length; l++) {
for(m=0; m < hmoplans_all ["data"].length; m++){
if(hmoplans_all["data"][m]["Provider ID"]!==null){
if(pid[l]==hmoplans_all["data"][m]["Provider ID"]){
hmofirst_row="<td>"+hmoplans_all["data"][m]["Emp"]+"</td>";
var table = document.getElementById("data");
var cell1 = row.insertCell(1);
cell1.innerHTML=hmofirst_row;
//$("#data").append(hmofirst_row);
}
}
}
}
//WPlans creating the columns for row
var j;
var k;
for (j = 0; j < bid.length; j++) {
for(k=0; k < wplans_all ["data"].length; k++){
if(wplans_all["data"][k]["Broker ID"]!==null){
if(bid[j]==wplans_all["data"][k]["Broker ID"] || pid[j]==wplans_all["data"][k]["Provider ID"]){
first_row="<td>"+wplans_all["data"][k]["Emp"]+"</td>";
var table = document.getElementById("data");
var cell1 = row.insertCell(1);
cell1.innerHTML=first_row;
}
}
}
}
buildrow2();
}

As you call the function to create a table, your first line of code to be executed should be setting the innerHTML = " ". By so doing, each time the function is called, it first clears the the table before creating another table.

How do I check if a cell has a select element in a Javascript loop?

I have a dynamically created table which is generated through a JS addRow function. I would like to loop through this table and check if the cell has a select element in it. If it does then I would like to push the value of the selected option to a dictionary called ingredient_dict.
This is what I have so far:
var table = document.getElementById('selected_ingredients');
var rowCount = table.rows.length;
//table width by counting headers minus the last cell which has a delete button
var cellsCount = table.rows[0].cells.length -1 ;
//loop through all rows (r) in table
for (var r = 1; r < rowCount; r++) {
//initiate dictionary for this ingredient
var ingredient_dict = {};
//loop through each cell (c) in row
for (var c = 0; c < cellsCount; c++) {
var $cell = table.rows[r].cells[c];
if (**CHECK IF CELL HAS A SELECT ELEMENT**) {
$ingredient_dict["UOM"] = $cell.options[$cell.selectedIndex].value
} else if (**CHECK IF CELL HAS INPUT ELEMENT**) {
$ingredient_dict["qty"] = $cell.value
} else {
$ingredient_dict["name"] = $cell.value
}
}
}
I'm not sure if it matters but this is the code in my addRow function to dynamically create the select element:
// ingredient unit of measurement drop down
var cell3= row.insertCell(2);
var unit_of_measure = document.createElement("select");
unit_of_measure.name = "unit_of_measure_select";
cell3.appendChild(unit_of_measure);
I'm pretty new to javascript so I apologize if my code is messy or if this is an obvious question!

var doesCellHaveElement = (cell,element) => {
return cell.innerHTML.toLowercase().indexOf(`<${element}`) >= 0;
};
element would be some name of tag in lowercase. For example:
doesCellHaveElement(cell, "select");
doesCellHaveElement(cell, "input");

Add links to all cells in column of html table

I would like to loop through the cells in the second column of an html table, adding a link to the text in each cell. I have a generic base URL, with a hash that should be defined by an integer in the corresponding cell in the first column of the table.
For example, the text in first cell of the second column should link to:
http://test.example.com/foo.html#1
Where the #1 is defined by the integer in the first cell of the first column (1). Then repeat for each row, where the integer in each cell of the first column should be used for the hash.
Pure js or jquery would work. I have found this snippet of jquery, which seems like a good start for iterating through each cell in the second column:
$('#table1 td:nth-child(2)').each(function(elem) {
//do something with elem
});
Is this jquery method appropriate, and if so, how can I apply the links as described?
As a possible alternative, could I modify the function I use to create the table?:
function createTable(tableData) {
var table = document.getElementById('table1');
var tableBody = document.createElement('tbody');
tableData.forEach(function(rowData) {
var row = document.createElement('tr');
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
document.getElementById('wrapper').appendChild(table);
}
createTable(table_input);

Since you are the one creating the table at the first place it is best to modify the code and render it correctly (as oppose to updating it later on client-side).
Based on your comments and clarification here is the updated code, storing the integer value of first column of each row to use it as url on second column:
function createTable(tableData) {
var table = document.getElementById('table1');
var tableBody = document.createElement('tbody');
var theUrl = 'http://test.example.com/foo.html#'; //replace with real URL
tableData.forEach(function(rowData) {
var row = document.createElement('tr');
var i = 1;
var numValue = '';
var content = '';
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
numValue = (i==1) ? cellData : numValue ;
if(i==2){
content = document.createElement('a');
content.setAttribute('href', theUrl + numValue);
content.innerText = cellData ;
}
else{
content = document.createTextNode(cellData);
}
cell.appendChild(content);
row.appendChild(cell);
i++;
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
document.getElementById('wrapper').appendChild(table);
}
createTable(table_input);

You may change the following code:
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
to
for (var i=0; i<rowData.length;i++)
{
var cell = document.createElement('td');
if (i==1)
{
var link=document.createElement("a");
link.href="http://test.example.com/foo.html#"+(i+1);
link.text=rowData[i];
cell.appendChild(link);
}
else
cell.textContent=rowData[i];
row.appendChild(cell);
}

Get value from input in a table

I have the following code:
function create_row() {
var table = document.getElementById("main_table");
var n = table.rows.length;
var m = table.rows[0].cells.length;
var row = table.insertRow(-1);
var cell = row.insertCell(0);
cell.innerHTML = n;
var cell = row.insertCell(1);
cell.innerHTML = "<input size=10>";
for (i=2; i<m; i++) {
var cell = row.insertCell(i);
cell.innerHTML = "<input size=4>";
}
}
function print_values() {
var table = document.getElementById("main_table");
for (i=1; i<table.rows.length; i++) {
console.log(table.rows[i].cells[1].innerHTML);
}
}
However, when I print values I get <input size="10">.
The problem is that when I create a row, I add manually some value to a table (in a webpage) and I want to print those values in a log. How can I access those values, but not html of the input?
I probably can assign an id to each input form and then access value keyword, but thought maybe it could suffice using table cells.

The input element is a child of the table cell. And you have to use .value to get the value of an input, not .innerHTML.
console.log(table.rows[i].cells[1].childNodes[0].value)

You want the insides of your input, so you'll have to select that input.
yourExistingSelector.querySelector("input").innerHTML
In your case:
table.rows[i].cells[1].querySelector("input").innerHTML

why doesn't this 'addRow' javascript work in IE?

I have the following javascript that adds a new row to the bottom of a table.
It works fine in Firefox, but it doesn't work in IE (version 8).
There are no visible errors, as far as I can tell.
Any ideas are very helpful!
function addRow() {
// locate the last row in the table
var table = document.getElementById("approversTable");
var rows = document.getElementsByTagName("tr");
var rowToClone;
for (var i=0; i<rows.length; i++) {
if (rows[i].id != "") {
rowToClone = rows[i];
}
}
// clone the row
var clone = rowToClone.cloneNode(true);
var rowId = Math.floor(Math.random()*100000);
clone.id = rowId;
// add the new row to the table
table.appendChild(clone);
}

You should select the table tbody element instead of the table directly.
function addRow() {
var table = document.getElementById("approversTable");
var tbody = table.tbodies[0];
var rows = document.getElementsByTagName("tr");
var rowToClone;
for (var i=0; i<rows.length; i++) {
if (rows[i].id != "") {
rowToClone = rows[i];
}
}
// clone the row
var clone = rowToClone.cloneNode(true);
var rowId = Math.floor(Math.random()*100000);
clone.id = rowId;
// add the new row to the table
tbody.appendChild(clone);
}
more info at: http://www.w3schools.com/jsref/coll_table_tbodies.asp