Get value from input in a table - javascript

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

Related

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.

Why can't I total up these values?

I am building a gradebook web app. I wanted the app to have the ability to calculate grades upon pushing the Final button. However, it's not working for some reason:
var myTable = document.getElementById("myTable");
var r = 0;//how many rows; row index
var c = 1;//how many columns
//make a table
//table must be able to add rows
//table cells should be editable
//save changes?
//
//make a table head row
//all table columns must have a table head
//**
// var firstRow= myTable.insertRow(0);
function addRow(){
//make a new row
var row = myTable.insertRow(r);
//use a while loop to keep creating row cells until you reach last column
var i = 0;
while(i<c){
var cell = row.insertCell(i);
cell.innerHTML ="Students[i]";
i++;
}
r++;
}
function addColumn(){
//make new column
//increment column
var tHead = document.createElement("th");
var allRows= document.getElementsByTagName("tr");//get all rows
//put tHead in first row
allRows[0].append(tHead);
var dateTable = document.createElement("input");
dateTable.type = "date";
tHead.appendChild(dateTable);
//tHead.innerHTML = (c*2);
//add a new cell for each row
var j =1;
while(j<allRows.length){
var row2 = allRows[j];
var cell2 = row2.insertCell(c);
cell2.innerHTML = j;
j++;
}
c++;
f++;
//if there already id a final row, delete it
}
function unEdit(){
//go through every cell
//save input value to a variable
//remove the input cell
var valArray =[];
document.querySelectorAll("td>input").forEach(input => {
var num = parseInt(input.value);
valArray.push(num);
input.remove();
});
//put input value into innerhtml of td
var i = 0;
document.querySelectorAll("td").forEach(td =>{
td.innerHTML=valArray[i];
i++;
});
}
function editTable(){
var allCells = document.getElementsByTagName("td");
for(var k=0; k<allCells.length; k++){
var oldText= allCells[k];
var input = document.createElement("input");
input.type ="number";
input.max = 100;
input.min = 0;
//before making all cells input, save previous innerhtml to var,
//make it into a num instead of a string, and put that value into input
var prev = allCells[k].innerHTML;
prev = parseInt(prev);
input.value = prev;
allCells[k].innerHTML = "";
allCells[k].appendChild(input);
input.onblur;
}
}
function deleteRow(){
document.getElementById("myTable").deleteRow(1);
r--;
}
function deleteColumn(){
//go through each row
//delete cell at each index
var everyRow = document.getElementsByTagName("tr");
for(var p=0; p<everyRow.length; p++){
everyRow[p].deleteCell(-1);
}
c--;
var finalButton = document.getElementById("final");
finalButton.enabled = true;
}
//final grade column
function finalRow(){
//make a <thead>
//make a new cell going down
var finalHead = document.createElement("th");
finalHead.innerHTML= "Final Grade";
var theseRows = document.getElementsByTagName("tr");
theseRows[0].append(finalHead);
for(var t =1; t<theseRows.length; t++){
//go through every cell in the row
//total up the numbers and put it in the final cell
var finalTotal=0;
for(var e =1; e< theseRows[t].length; e++){
var numero = theseRows[t][e].value;
numero = parseInt(numero);
console.log(numero);
finalTotal += numero;
}
//add up the innerhtmls and put it in finalCell
var finalCell = theseRows[t].insertCell(-1);
finalCell.innerHTML = finalTotal;
}
c++;
//disable final button
var finalButton = document.getElementById("final");
finalButton.disabled = true;
var days = document.getElementById("days");
days.disabled = true;
}
addRow();
addColumn();
//make a table head row at the top
//maybe add a print button?
//add a final grade column
//make it so that final row stays final when add new students and days
//do final funtion inside of unEdit() at the end?????
table,td,th{
border: 1px solid black;
border-collapse: collapse;
}
<table id = "myTable"></table>
</script>
<button onclick ="addRow()">Students</button>
<button onclick ="addColumn()" id ="days">Days</button>
<button onclick="editTable()">Edit</button>
<button onclick="unEdit()">Unedit</button>
<button onclick="deleteRow()">Delete Row</button>
<button onclick="deleteColumn()">Delete Column</button>
<button onclick ="finalRow()" id ="final">Final</button>
<button>Print</button>
In the finalRow() function, I can't figure out why the total I keep getting is always 0. Why doesn't it add up the value of the cells? I wanted it to go through every row, get the number values from each cell and total it up. It seems like the issue is with the "numero" variable, but I'm not sure what the issue is.
the first error is because you forgot to declare the variable f, you declared only the variables r and c above.
the second is in the function DeleteRow() there is an indexing error because it finds a negative value when deleting the last row. If you don't even want him to delete the last row, I suggest using a Try-Catch to deal with this error.

Way to add href in row data in table using html

Is there a way to display a table that with rows that will include its value in the hyperlink?
ReferenceNumber
1234 -> this one is clickable leading to localhost:8080/getDetails/1234
1235
Thank you
//Add the data rows from Excel file.
for (var i = 0; i < excelRows.length; i++) {
//Add the data row.
var row = table.insertRow(-1);
//Add the data cells.
var cell = row.insertCell(-1);
cell.innerHTML = excelRows[i].ReferenceNumber;
}
Just wrap it in <a></a> tag.
//Add the data rows from Excel file.
for (var i = 0; i < excelRows.length; i++) {
//Add the data row.
var row = table.insertRow(-1);
//Add the data cells.
var cell = row.insertCell(-1);
var link = '' + excelRows[i].ReferenceNumber + '';
cell.innerHTML = link;
}

How to assign variable ids to tables rows and columns

How can I assign ids to the rows, columns if I want to use this method for creating tables. Knowing that the ids are variables, eg. array length.
function addRow(tableID, text) {
// Get a reference to the table
var tableRef = document.getElementById(tableID);
// Insert a row in the table
var newRow = tableRef.insertRow();
// Insert a cell in the row
var newCell = newRow.insertCell();
// Append a text node to the cell
var newText = document.createTextNode(text);
newCell.appendChild(newText);
}
// Call addRow(text) with the ID of a table
addRow('TableA', 'Brand new row');
addRow('TableA', 'Another new row');
Let us say you want to add k rows. Simple, create the rows in a loop of k iteration.
var tableRef = document.getElementById(tableID);
//to add k rows
for (x=0; x<k; x++)
{
// Insert a row in the table
var newRow = tableRef.insertRow(x);
newRow.setAttribute("id","row"+x);
// Insert a cell in the row
var newCell = newRow.insertCell(0);
// Insert another cell in the row
var newCell2 = newRow.insertCell(1);
//insert HTML text in the cells
newCell.innerHTML="text1";
newCell2.innerHTML="text2";
} //end for
}//end function

How to add an UpperCase function to each textbox in a dynamic table?

I am trying to create a dynamic table with textboxes but I want the textboxes to be converted to upper case every time I write.
Any ideas on how to do this??
Currently this is how I am doing the dynamic table:
var n = 1;
function addRow(tableID,nroColumna) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
for(i=0;i<nroColumna;i++){
var cell = row.insertCell(i);
var element = document.createElement("input");
element.type = "text";
element.name = n+"0"+i;
element.size = "12";
element.id = n+"0"+i;
//element.onkeyup = function(){alert()};
cell.appendChild(element);
}
n++;
}
I was trying to do a document.getElementById(element.id).value.toUpperCase() but I am getting an error with a null value for the element.id
Any help is greatly appreciated!
If you're ok with a non JavaScript solution, you could apply this CSS to your inputs:
text-transform: uppercase;
That would make the text uppercase from the beginning...
Darkajax's solution, works, you can target it to inputs within a table with a specific ID
with
#tableid input
{
text-transform: uppercase;
}
I tested your code with the onkeyup function activated:
var n = 1;
function addRow(tableID,nroColumna) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
for(i=0;i<nroColumna;i++){
var cell = row.insertCell(i);
var element = document.createElement("input");
element.type = "text";
element.name = n+"0"+i;
element.size = "12";
element.id = n+"0"+i;
element.onkeyup = function(){alert(element.id);};
cell.appendChild(element);
}
n++;
}
And that worked. However, it uses the last element.id computed for every call to the function... so, when I created one row of 3 cells, every time I typed into a cell, it would alert "102" regardless of which cell I typed in.
This is because the onkeyup function is dynamic. It is called on the keyup action - not set when the object is created. So it uses the element.id value that exists at the time of the action, not what it was when you passed it in the first time. I hope that makes sense.
I had this issue myself on a recent project. One solution is to create a separate function for the inner workings of the for loop as such:
var n = 1;
function createRow (n, i) {
var element = document.createElement("input");
element.type = "text";
element.name = n+"0"+i;
element.size = "12";
element.id = n+"0"+i;
element.onkeyup = function(){alert(element.id);};
return element;
}
function addRow(tableID,nroColumna) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
for(i=0;i<nroColumna;i++){
var cell = row.insertCell(i);
element = createRow(n, i);
cell.appendChild(element);
}
n++;
}
This code alerts the correct element.id value.
EDIT: you can change the onkeyup() line to read:
element.onkeyup = function(){document.getElementById(element.id).value = document.getElementById(element.id).value.toUpperCase();};
And it should work as you want it to.
with jQuery it will be like
$('.yourClass').val($(this).val().toUpperCase());
or
$('#yourId').css({'text-transform' : 'uppercase'})

Categories