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);
Related
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]);
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());
});
});
I have stucked with this for days now.
I have a JavaScript function that creates a 10x10 table with 100 images in each td elements. At the creation of these images, I add an onclick event listener to them with a parameter of their ID number. When these images are clicked, they should pop up an alert with their ID number in content. However, the alert message shows me "[object MouseEvent]" instead. I don't have an idea what causes that. I've been searching on w3schools, stackoverflow and other blogs, but not much success so far.
This is the JS code:
function orbClicked(orb) {
alert(orb);
}
function initField() {
var table = document.getElementById("gameField");
for (var i = 0; i < 10; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 10; j++) {
var td = document.createElement("td");
var orbNumber = i * 10 + j;
var orbImage = document.createElement("img");
orbImage.setAttribute("src", "images/orb_empty.png");
orbImage.setAttribute("id", "orb" + orbNumber);
orbImage.addEventListener("click", function(orbNumber) {orbClicked(orbNumber)}, false);
td.appendChild(orbImage);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
Thank you in advance for your help!
function orbClicked(orb) {
alert(orb);
}
function initField() {
var table = document.getElementById("gameField");
for (var i = 0; i < 10; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 10; j++) {
var td = document.createElement("td");
var orbNumber = i * 10 + j;
var orbImage = document.createElement("img");
orbImage.setAttribute("src", "images/orb_empty.png");
orbImage.setAttribute("id", "orb" + orbNumber);
orbImage.addEventListener("click", function() {orbClicked(this.id)}, false);
td.appendChild(orbImage);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
don't pass the id variable in run time function (callback), because it will not be available at run time. Just fetch the id at run time and pass , so "this.id" wil give the id of clicked image.
I'd like to be able to reverse the results of a table returned from a PHP database with javascript, but can't seem to figure out how to get the reverse(); method to work. I'd appreciate any help you could give me.
This is my Javascript:
function title()
{
var sortedOn = 0;
var display = document.getElementById("table");
var list = new Array();
var tableLength = display.rows.length;
for(var i = 1; i < tableLength; i++){
var row = display.rows[i];
var info = row.cells[0].textContent;
list.push([info,row]);
}
list.sort();
var listLength = list.length;
for(var i = 0; i < listLength; i++) {
display.appendChild(list[i][1]);
}
This is in my html table:
<th>Title</th>
function reverse(){
var display = document.getElementById("table");
var length = display.rows.length;
for(var i = 0; i < length; i++)
{
display.appendChild(
display.removeChild(display.rows[length - i - 1])
);
}
}
Here's the fiddle
I am using the following method to read header names in a table and put in excel. Could anyone let me know how to modify this to support multiple tables with header info and data.
i.e. how to modify to pass table id. "headers" is the id for "th" tag in code.
function write_headers_to_excel()
{
str="";
var myTableHead = document.getElementById('headers');
var rowCount = myTableHead.rows.length;
var colCount = myTableHead.getElementsByTagName("tr")[0].getElementsByTagName("th").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
for(var i=0; i<rowCount; i++)
{
for(var j=0; j<colCount; j++)
{
str= myTableHead.getElementsByTagName("tr")[i].getElementsByTagName("th") [j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i+1,j+1).Value = str;
}
}
Your question is a bit vague, so I'm guessing at what you want. Assuming your current function works as is, you can just take out the hard-coding of the table's ID and pass it in as a parameter:
function write_headers_to_excel(tableID) {
var myTableHead = document.getElementById(tableID);
// rest of your function as is
}
Then call it once for each table, though that will create a new ExcelSheet for each table.
If the idea is for all of the tables to be added to the same ExcelSheet you can pass an array of table IDs to the function something like the following. I've kept the basic structure of your function but moved the variable declarations out of the loops (since that what JavaScript does behind the scenes anyway), deleted your ExcellApp variable since it wasn't used, and moved the getElementsByTagName call out of the inner loop.
write_headers_to_excel(["headers1","headers3","headers7","etc"]);
function write_headers_to_excel(tableIDs) {
var myTableHead,
rowCount,
cols,
t,
i,
j,
rowOffset = 1,
ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
for (t=0; t < tableIDs.length; t++) {
myTableHead = document.getElementById(tableIDs[t]);
rowCount = myTableHead.rows.length;
for(i=0; i<rowCount; i++) {
cols = myTableHead.rows[i].getElementsByTagName("th");
for(j=0; j < cols.length; j++) {
ExcelSheet.ActiveSheet.Cells(i+rowOffset,j+1).Value = cols[j].innerHTML;
}
}
rowOffset += rowCount;
}
}
(No, I haven't tested it.)
You can get all tr elements by tag name
var rows = document.getElementsByTagName('tr');// get all rows of all tables
var table=0, TableRow=0;
for (i = 0; i < rows.length; i++) {
row = rows[i];
if (row.parentNode.tagName != 'THEAD' && row.parentNode.tagName != 'thead') {
table=table+1;
// do something here for headers
} else if (row.parentNode.tagName != 'TBODY' && row.parentNode.tagName != 'tbody')
{
TableRow=TableRow+1;
//do something here for rows
}
}