how can i change the inner html by getting element by index
i want to change the content of cells according to their index values
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
function LFLS() {
// LFLS => load from local Storage
for (i = 0; i < localStorage.length; i++) {
key = localStorage.key(i);//it return values like ("1,2","2,5", etc.)
console.log(key)
row = key.split(",")[0];
col = key.split(",")[1];
//how to get the cell by row and col
}
}
As Sakil said you can use eq(). Try this:
function LFLS() {
// load from local Storage
for (i = 0; i < localStorage.length; i++) {
key = localStorage.key(i);
row = key.split(",")[0];
col = key.split(",")[1];
// how to get the cell by row and col
$("table tr").eq(row).children().eq(col).html('NEW VALUE')
}
}
I believe you need the following snippets.
Before your for loop
const rows = $("table tr");
After you obtain row & col variables
const cellToUpdate = rows[row].children[col];
Alternatively, if you're looking to programatically loop through the table you could use the following snippet.
<script type="text/javascript">
const rows = $("table tr");
for( i = 0; i < rows.length; i++ ) {
const currRow = rows[i];
const rowChildren = currRow.children;
for( n = 0; n < rowChildren.length; n++ ) {
const cell = rowChildren[n];
cell.innerHTML = "My new data for row: " + i + " in cell " + n;
}
}
</script>
Is something on the lines of below not going to work for you for some reason?
$("table tr:nth-of-type([your-row])).eq([your-col]).html([your_content]);
Related
This block of code is to create 3 arrays with the values pulled from the user's input in a popup menu in the HTML file, but the values here are needed to fill in the table below.
var arrM = new Array; var arrT = new Array; var arrA = new Array;
arrM[0] = mod0.mod.value; arrT[0] = mod0.target.value; arrA[0] = mod0.actual.value;
arrM[1] = mod1.mod.value; arrT[1] = mod1.target.value; arrA[1] = mod1.actual.value;
arrM[2] = mod2.mod.value; arrT[2] = mod2.target.value; arrA[2] = mod2.actual.value;
arrM[3] = mod3.mod.value; arrT[3] = mod3.target.value; arrA[3] = mod3.actual.value;
arrM[4] = mod4.mod.value; arrT[4] = mod4.target.value; arrA[4] = mod4.actual.value;
arrM[5] = mod5.mod.value; arrT[5] = mod5.target.value; arrA[5] = mod5.actual.value;
arrM[6] = mod6.mod.value; arrT[6] = mod6.target.value; arrA[6] = mod6.actual.value;
arrM[7] = mod7.mod.value; arrT[7] = mod7.target.value; arrA[7] = mod7.actual.value;
arrM[8] = mod8.mod.value; arrT[8] = mod8.target.value; arrA[8] = mod8.actual.value;
arrM[9] = mod9.mod.value; arrT[9] = mod9.target.value; arrA[9] = mod9.actual.value;
the code in between the block above and the block below(not shown here) is just to compute the average values and does not interact with the block below
the code below is to create a table with the same number of rows as the number of rows the user filled in the popup menu.
var tableGenerator = document.getElementById("tableGenerator");
tbl = document.createElement('table');
tbl.style.width = '500px';
tbl.style.height = '100px';
tbl.style.border = '1px solid black';
tbl.style.margin = '50px';
tbl.style.float = 'left';
if (j < 6) {
j = 6;
}
for (var a = 0; a < j+1; a++) {
var tr = tbl.insertRow();
for (var b = 0; b < 3; b++) {
if (a == j && b == 3) {
break;
} else {
var td = tr.insertCell();
td.appendChild(document.createTextNode(""));
td.style.border = '1px solid black';
if (a == 0 && b == 0) {
var newtext = document.createTextNode(Text);
var celltext = "Year " + year.value + " Semester " + semester.value;
td.appendChild(document.createTextNode(celltext));
td.setAttribute('colSpan', '3'); break;
}
//this else block below here obviously doesn't work, but this idea is there and I want something that
//works like the pseudo code below
else {
for (a = 1; a < j; a++) {
tbl[a][0] = arrM[a];
tbl[a][1] = arrT[a];
tbl[a][2] = arrA[a];
}
}
}
}
}tableGenerator.appendChild(tbl);
I am very unfamiliar with HTML/JS/CSS, is it possible for us to access cell values of a table as if it is an array? or is there any better way to do this?
In JavaScript you'll need to either create text nodes and assign the content of that node, or assign the content to the textContent, innerText or innerHTML properties to give the table cells their values.
td.textContent = 'Hello'; // This is the preferred property for text.
The help you achieve this it would be wise to structure your data in a way that you can loop over, because you're basically doing the same thing in a specific order. For example:
var data = [
arrM,
arrT,
arrA
];
This will put your arrays in another array. Now you can loop over the data array and create a table row for each array, and a table cell for each item in the nested array.
for (var i = 0; i < data.length; i++) {
// ... create table row.
for (var j = 0; j < data[i].length; j++) {
// ... create table cell and assign textContent property.
}
}
Examine the example below. It's a runnable version of the thing I've explained above. I hope it helps you out.
function createTable(headers, values) {
var table = document.createElement('table');
// Build <thead>
var tableHeader = table.createTHead();
// Create <tr> inside <thead>
var tableHeaderRow = tableHeader.insertRow();
for (var i = 0; i < headers.length; i++) {
// Create <th>
var tableHeaderCell = document.createElement('th');
// Set text of <th> to value in array.
tableHeaderCell.textContent = headers[i];
// Add <th> to <tr> inside <thead>
tableHeaderRow.appendChild(tableHeaderCell);
}
// Build <tbody>
var tableBody = table.createTBody();
for (var j = 0; j < values.length; j++) {
// Create <tr> inside <tbody>
var tableBodyRow = tableBody.insertRow();
for (var k = 0; k < values[j].length; k++) {
// Create <td> inside <tr>
var tableBodyCell = tableBodyRow.insertCell();
// Set text of <td> to value in array.
tableBodyCell.textContent = values[j][k];
}
}
// Add <table> to the <body>
document.body.appendChild(table);
}
var titles = [
'One',
'Two',
'Three'
];
var characters = [
['Batman', 'Robin', 'Batgirl'],
['Joker', 'Two-Face', 'Poison Ivy'],
['James Gordon', 'Alfred Pennyworth', 'Clayface']
];
createTable(titles, characters);
I have dynamic table, it contains 5 textbox controls, i am trying to retrieve label text of all controls. How can i do this.
THanks.
What i had tried:
var table = document.getElementById("ControlTable_");
if (table != null) {
var trlength = table.rows.length;
for (var i = 0; i < trlength; i++) {
var tclenght = table.cells.length;
for (var j = 0; j < tclenght; j++) {
var check = table.rows[i].cells[j].innerText;
}
}
}
Here i am getting innertext undefined
You can have a 2d representation of your table by using something like the following function:
const mapTo = (element, selector, callback) => Array.from(
element.querySelectorAll(selector),
callback
);
const extractText = td => td.textContent;
const tableAsJson = mapTo(
document,
'#ControlTable_ tr',
(row) => mapTo(row, 'td', extractText),
);
console.log('table', tableAsJson);
<table id="ControlTable_">
<tr>
<td>hello</td>
<td>World</td>
</tr>
<table>
if your td elements also contain something like
<label for="something">
Label
</label>
<input />
then something like this may help
const extractText = td => td.querySelector('label').textContent;
Just a note,
please make sure you attach relevant part of your dom structure while asking similar questions in future :)
Here is what I've tried:
var table = document.getElementById("ControlTable_");
if (table != null) {
var trlength = table.rows.length;
for (var i = 0; i < trlength; i++) {
// use this instead of table.cells, because each cell must be specified by a row
// i.e: table.rows[i].cells
var td = table.rows[i].getElementsByTagName('td');
for (var j = 0; j < td.length; j++) {
var check = table.rows[i].cells[j].innerText;
console.log(check);
}
}
}
You need to find and get value from the label in the table cell.
var table_rows = $('#ControlTable_ tr');
for (var i = 0; i < table_rows.length; i++) {
var row = table_rows[i];
var columns = $(row).find('td');
for (var j = 0; j < columns.length; j++) {
var label = $(columns[j]).find('label');
if (label.length > 0) {
var check = label[0].innerText;
console.log(check);
}
}
}
Check below link for working example.
https://jsfiddle.net/rgehlot99/d5zntL6c/2/
(Values can be found in console)
I'm checking for duplicates in a table. What I'm trying to accomplish is when I display the first column if it is the same value as the previous row I don't want to display the value. I'm finding the duplicates but I get an error when I try to hide them by using display. style ="none"; My code is below.
I'm Thanking You In Advance
PD
var data=[['e',0,1,2,3,4], ['a',54312,235,5,15,4], ['a',6,7,8,9,232],
['a',54,11235,345,5,6], ['b',0,1,2,3,4], ['b',54312,235,5,15,4],
['c',62,15,754,93,323], ['d',27,11235,425,18,78], ['d',0,1,2,3,4],
['d',54312,235,5,15,4], ['e',6,7,8,9,232], ['e',54,11235,345,5,6],
['e',0,1,2,3,4], ['e',54312,235,5,15,4], ['e',62,15,754,93,323],
['e',27,11235,425,18,78]];
//Create a HTML Table element.
var table = document.createElement("TABLE");
var somedata = document.createElement("TD");
var dvTable = document.getElementById("dvTable");
var elems = document.getElementsByClassName("tableRow");
//Get the count of columns.
var columnCount = data[0].length;
//Add the data rows.
for (var i = 0; i < data.length; i++) {
var row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
//Searching for duplicates
var num = data[i][0];
for (var otherRow = i + 1; otherRow < data.length; otherRow++) {
var dup = data[otherRow][0];
console.log("What is the dup" + dup);
if (num === dup)
{
console.log("duplicate");
dvTable[i].style.display = "none";
}
}
var cell = row.insertCell(-1);
cell.innerHTML = data[i][j];
cell.innerHtml = myZero;
}
}
dvTable is an HTML table element. You can't access the row using dvTable[i].
Try -
dvTable.rows(i).cells(j).style.display = none;
I am creating a simple function that increment number and bind with multiple Table as S.NO.. I don't understand what's wrong with my code.
function _IncrementNumber(id) {
var table = document.getElementById(id);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i + 1].cells[0].innerHTML = (i + 1);
}
}
$(document).ready(function () {
_IncrementNumber("FirstTable");
_IncrementNumber("SecondTable");
});
DEMO
Please guide me.
You are accessing i+1 instead of i.
In the last iteration -> you will go out of bounds.
function _IncrementNumber(id) {
var table = document.getElementById(id);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i].cells[0].innerHTML = (i + 1);
}
}
$(document).ready(function () {
_IncrementNumber("FirstTable");
_IncrementNumber("SecondTable");
});
You're trying to access a row that doesnt exist.
You should start with i=1 instead to skip the header row
for (var i = 1; i < rowCount; i++) {
table.rows[i].cells[0].innerHTML = (i);
}
the error at this line was the issue. Table rows starts from 0 index. so dont need to increment the rows index change to this table.rows[i].cells[0].innerHTML = (i + 1);
I have this html table:
tabela
|A|B|C|D|
_________
001|M|N|O|P|
002|R|S|T|U|
And with this script I can get the row 1st value, e. onclick N get the value 001
var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function() {
var rowid = (this.cells[0].innerHTML);
window.location.href = "next.php?rowidphp="+ rowid;
});
}
The thing is that I need to get the column 1st value, e. onclick N shuld get the value B
I'm trying everything but I can reach the point.....
Here's the fiddle: http://jsfiddle.net/t7G6K/
var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function (e) {
var rowid = (this.cells[0].innerHTML);
var j = 0;
var td = e.target;
while( (td = td.previousElementSibling) != null )
j++;
alert(rows[0].cells[j].innerHTML);
});
}
Try this:
table = document.getElementById("tablea");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].cells[2].onclick = function (e) {
rowid = e.target.previousElementSibling.previousElementSibling.textContent;
alert(rowid);
};
}
Here is the Demo
jsFiddle http://jsfiddle.net/2dAkj/9/#
Ok with jQuery i would do it like this.
$(function () {
$('table').on('click', function (e) {
var x = $(e.target);
var index = x.parents('tr').find('td,th').index(x);
alert($(x.parents('table').find('tr').first().find('td,th')[index]).text());
});
});