Develop Reference

Calculate a new AveValue in TableCell while adding new Columns using JavaScript-not JQuery

I have a <th> header row with a stated class, and one fixed row with a stated class. Both are contenteditable. I'm adding new rows and new columns. I want to calculate the AverageValue in the final cell. I have tried the code on a fixed number of rows and it works, but when I try it this way it is only taking in the number of columns, not the DATA inserted. It is also not recognizing the row DATA. I'm clearly missing a function?!
I'm at the stage where I need an extra pair of eyes.
JavaScript:
func = function() {
var table = document.getElementById("mytable");
var rows = table.rows;
for (var j = 1; j < rows.length; j++) {
var total = 0;
var cells = rows[j].cells;
for (var i = 2; i < (cells.length - 1); i++) {
var a = document.getElementById("mytable").rows[j].cells[i].innerHTML;
a = parseInt(a);
if (!isNaN(a)) {
total = total + a;
}
}
total = total / (cells.length - 3);
total = Math.round(total);
if (total < 40) {
document.getElementById("mytable").rows[j].cells[cells.length - 1].style.backgroundColor = "red";
document.getElementById("mytable").rows[j].cells[cells.length - 1].style.color = "white";
}
document.getElementById("mytable").rows[j].cells[cells.length - 1].innerHTML = total + "%";
}
}
addRow = function() {
var table = document.getElementById('mytable'); // table reference
var row = table.insertRow(table.rows.length); // append table row
// insert table cells to the new row
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), "-");
}
}
createCell = function(cell, text, style) {
var div = document.createElement('div');
txt = document.createTextNode(text);
div.appendChild(txt); // append text node to the DIV
div.setAttribute("class", style); // set DIV class attribute
div.setAttribute("className", style);
div.setAttribute("contenteditable", true);
div.setAttribute('placeholder', '' - '');
cell.appendChild(div); // append DIV to the table cell
}
createCellCol = function(cell, text, style) {
var div = document.createElement('div');
txt = document.createTextNode(text);
div.appendChild(txt); // append text node to the DIV
div.setAttribute("class", style); // set DIV class attribute
div.setAttribute("className", style);
div.setAttribute("contenteditable", true);
div.setAttribute("placeholder", "-");
cell.appendChild(div); // append DIV to the table cell
}
addColumn = function() {
var table = document.getElementById("mytable"); // table reference
var rowNums = table.rows.length;
for (i = 0; i < rowNums; i++) {
if (i == 0) {
createCell(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-");
} else {
createCellCol(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-");
}
}
}
HTML:
<table class="tg" id="mytable">
<tr>
<th class="tg-s6z2" contenteditable="true">Student Name</th>
<th class="tg-s6z2" contenteditable="true">Student ID</th>
<th class="tg-s6z2" contenteditable="true">Assignment 1</th>
<th class="tg-s6z2" contenteditable="true">Final Grade</th>
</tr>
<tr>
<td class="tg-031e" contenteditable="true">Student1</td>
<td class="tg-031e" contenteditable="true">StudentNo</td>
<td class="tg-0ord" contenteditable="true"></td>
<td class="tg-0ord" contenteditable="true"></td>
</tr>
</table>
<button id="btnFinalGrade" class="btn btn-action" onClick="func();">Final Grade</button>
<button id="btnaddRow" class="btn btn-action" onclick="addRow();">AddRow</button>
<button id="btnaddColumn" class="btn btn-action" onclick="addColumn();">AddColumn</button>

You were adding a div to td element which was throwing error while executing this line document.getElementById("mytable").rows[j].cells[i].innerHTML
which returns a div element not the text you entered!
No need to add a div, Here is the updated code,
func = function () {
var table = document.getElementById("mytable");
var rows = table.rows;
for (var j = 1; j < rows.length; j++) {
var total = 0;
var cells = rows[j].cells;
for (var i = 2; i < (cells.length - 1); i++) {
var a = document.getElementById("mytable").rows[j].cells[i].innerHTML;
a = parseInt(a);
if (!isNaN(a)) {
total = total + a;
}
}
total = total / (cells.length - 3);
total = Math.round(total);
if (total < 40) {
document.getElementById("mytable").rows[j].cells[cells.length - 1].style.backgroundColor = "red";
document.getElementById("mytable").rows[j].cells[cells.length - 1].style.color = "white";
}
document.getElementById("mytable").rows[j].cells[cells.length - 1].innerHTML = total + "%";
}
}
addRow = function () {
var table = document.getElementById('mytable'); // table reference
var row = table.insertRow(table.rows.length); // append table row
// insert table cells to the new row
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), "-","tg-031e");
}
}
createCell = function (cell, text, style) {
var div = document.createElement('td');
txt = document.createTextNode(text);
cell.appendChild(txt); // append text node to the DIV
cell.setAttribute("class", style); // set DIV class attribute
cell.setAttribute("className", style);
cell.setAttribute("contenteditable", true);
cell.setAttribute('placeholder', '' - '');
//cell.appendChild(div); // append DIV to the table cell
}
createCellCol = function (cell, text, style) {
var div = document.createElement('td');
txt = document.createTextNode(text);
cell.appendChild(txt); // append text node to the DIV
cell.setAttribute("class", style); // set DIV class attribute
cell.setAttribute("className", style);
cell.setAttribute("contenteditable", true);
cell.setAttribute("placeholder", "-");
//cell.appendChild(div); // append DIV to the table cell
}
addColumn = function () {
var table = document.getElementById("mytable"); // table reference
var rowNums = table.rows.length;
for (i = 0; i < rowNums; i++) {
if (i == 0) {
createCell(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-","tg-031e");
} else {
createCellCol(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-","tg-s6z2");
}
}
}

How to change the element of a cell with the value of the element next to it in Javascript?

In table like the one below in the code snippet I would like that once clicked an item, I want to change the name of the selected cell to the next name corresponding to the sequence like in the array. [square, triangle, circle, oval, pentagon] So if I click "square", now the name appearing on it should be "triangle".
var card = [
{name:'square'},
{name:'triangle'},
{name:'circle'},
{name:'oval'},
{name:'pentagon'}
];
function generateTable(grid, rows, cols) {
var row;
var cells = rows * cols;
for(var i=0; i < cells; i++){
// track row length and insert new ones when necessary
// also creates the first row
if(i % cols == 0) {
row = grid.insertRow(-1);
}
// track our position in the card list
// modulo operator lets us loop through the cards repeatedly
var thisCard = card[i % card.length];
cell = row.insertCell(-1);
cell.innerHTML = thisCard.name;
cell.style.backgroundColor = '#D3D3D3';
}
}
generateTable(document.getElementById('grid'), 7, 7);
<table id="grid">
</table>

"I want the value to change to the next in the sequence" (clarification from a comment that it isn't the element to the right that matters, it's the sequence in the array)
OK, so I would probably use a (delegated) click handler attached to the table element. Get the value of the clicked td element and look it up in the card array, then from there get the next item from the array. Maybe a little something like this:
document.getElementById('grid').addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === "td") {
var currentIndex = card.findIndex(function(shape) {
return shape.name === e.target.innerHTML;
});
e.target.innerHTML = card[(currentIndex + 1) % card.length].name;
}
});
var card = [
{name:'square'},
{name:'triangle'},
{name:'circle'},
{name:'oval'},
{name:'pentagon'}
];
function generateTable(grid, rows, cols) {
var row;
var cells = rows * cols;
for(var i=0; i < cells; i++){
// track row length and insert new ones when necessary
// also creates the first row
if(i % cols == 0) {
row = grid.insertRow(-1);
}
// track our position in the card list
// modulo operator lets us loop through the cards repeatedly
var thisCard = card[i % card.length];
cell = row.insertCell(-1);
cell.innerHTML = thisCard.name;
cell.style.backgroundColor = '#D3D3D3';
}
}
generateTable(document.getElementById('grid'), 7, 7);
<table id="grid">
</table>
I have used the array .findIndex() method to find the item in the array, so if you want to support IE you'll need a polyfill, or of course you could just use a for loop or whatever.

You can access cells by their cellIndex property. So once you have the cell that was clicked on, get the cell to the right (if it exists) and update the innerHTML of the clicked on cell.
function changeName(e){
// Get the element that was clicked on
var cell = e.target;
var row, index;
// If it's a td, update the innerHTML
if (cell && cell.tagName.toLowerCase() == 'td') {
// Get the row that the cell is in
row = cell.parentNode;
// Get index of cell to right
index = cell.cellIndex + 1;
// Make sure cell to right exists
if (row.cells[index]) {
// Update clicked on cell
cell.innerHTML = row.cells[index].innerHTML;
}
}
}
window.onload = function(){
document.querySelector('table').addEventListener('click',changeName);
}
td {
width: 5em;
border: 1px solid #999999;
}
<table>
<tr><td>square<td>triangle<td>circle<td>oval<td>pentagon
</table>
Here is a more concise version:
window.onload = function() {
document.querySelector('table').addEventListener('click',
function(e) {
var cell = e.target;
var next = cell.cellIndex === undefined? null : cell.parentNode.cells[cell.cellIndex + 1];
if (next)
cell.innerHTML = next.innerHTML
});
};
td {
width: 5em;
border: 1px solid #999999;
}
<table>
<tr><td>square<td>triangle<td>circle<td>oval<td>pentagon
</table>
Edit
Updated to loop through the names in succession
var card = [
{name:'square'},
{name:'triangle'},
{name:'circle'},
{name:'oval'},
{name:'pentagon'}
];
function getNextCard(name) {
}
window.onload = function() {
document.querySelector('table').addEventListener('click',
function(e) {
var node = e.target;
var name = node.textContent;
var index;
if (node.tagName.toLowerCase() == 'td') {
index = (card.findIndex(function(obj){
return obj.name == name;
}) + 1) % card.length;
node.textContent = card[index].name;
}
});
};
td {
width: 5em;
border: 1px solid #999999;
}
<table>
<tr><td>square<td>triangle<td>circle<td>oval<td>pentagon
</table>

Please feel free to optimize this solution. Hope this works for you and this is what you want :)
var card = [{
name: 'square'
},
{
name: 'triangle'
},
{
name: 'circle'
},
{
name: 'oval'
},
{
name: 'pentagon'
}
];
function onCellClick(td) {
value = td.innerHTML.trim();
for (var i = 0; i < card.length; i++) {
var index;
if (card[i].name === value) {
index = i + 1;
if (card.length - 1 === i) {
index = 0
}
td.innerHTML = card[index].name;
break;
}
}
}
function generateTable(grid, rows, cols) {
var row;
var cells = rows * cols;
for (var i = 0; i < cells; i++) {
// track row length and insert new ones when necessary
// also creates the first row
if (i % cols == 0) {
row = grid.insertRow(-1);
}
// track our position in the card list
// modulo operator lets us loop through the cards repeatedly
var thisCard = card[i % card.length];
cell = row.insertCell(-1);
cell.innerHTML = thisCard.name;
cell.onclick = function() {
onCellClick(this);
};
cell.style.backgroundColor = '#D3D3D3';
}
}
generateTable(document.getElementById('grid'), 7, 7);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="grid">
</table>

find the <td> column value of respective cell using any javascript library

<table border="1">
<tr>
<td rowspan="3">0</td>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</table>
I want to find the column number of td containing X using jQuery or some other JavaScript library.
For example column number of td containing A is 1 and B is 3.
Also we know that column number of td containing X is 1. But how can we get that pragmatically.
My case here is I need to merge data of all the rows with first row. So while moving through each td I need to know from which column does it belong so that I can merge it to the td of first row of that column.
Please help me if there is any other approach to solve my problem.

Here is the Fiddle.
It gets the index and looks for rowspans and calculates the visible index.
function getColumnNumber(text) {
var $table = $("table").eq(0);
$("td:contains(" + text + ")").css("color", "red");
var $td = $("td:contains(" + text + ")"),
$tr = $td.parent(),
tdPosition = $td.index(),
trPosition = $tr.index(),
position = parseInt(tdPosition);
for (i = 0; i < trPosition; i++) {
for (j = 0; j <= tdPosition; j++) {
var rowSpan = parseInt($table.find('tr').eq(i).find('td').eq(j).attr("rowspan"));
if (typeof rowSpan !== "number") {
rowSpan = 0;
}
if (rowSpan > trPosition) {
position++;
tdPosition++;
}
}
}
console.log(text + " pos: " + position);
return position;
};
getColumnNumber('A');
getColumnNumber('B');
getColumnNumber('1');
getColumnNumber('Y');

This approach is basically storing your table data into an array, and intended if you ever want to expand or modify the structure of your table rowspan. (This does not support colspan)
$(function() {
var tableArr = [],
totalRow = $('table tr').length,
totalCol = 0;
$('table tr').each(function() {
var colLength = $(this).children('td').length;
totalCol = colLength > totalCol ? colLength : totalCol;
});
for (var r = 0; r < totalRow; r++) {
var row = [];
for (var c = 0; c < totalCol; c++) {
row.push(null);
}
tableArr.push(row);
}
$('td').each(function() {
var rowspan = $(this).attr('rowspan');
var rowIndex = $(this).parent('tr').index();
var colIndex = $(this).index();
var text = $(this).html();
if (rowspan && rowspan > 0) {
for (var i = 0; i < rowspan; i++) {
tableArr[i][colIndex] = text;
}
} else {
var lastNull = tableArr[rowIndex].indexOf(null);
tableArr[rowIndex][lastNull] = text;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td rowspan="3">0</td>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</table>
Your table information is stored within tableArr, which you use to query if you want to get desired columnIndex based on the content of your td.
Usage
// This returns an array containing [row, column];
function getPositionByText(str) {
for (var r = 0; r < tableArr.length; r++) {
for (var c = 0; c < tableArr[r].length; c++) {
if (tableArr[r][c] === str) {
return [r, c]
}
}
}
return null;
}
var position = getPositionByText('X');
var xRow = position[0];
var xCol = position[1];

jQuery: How to count table columns?

Using jQuery, how would you figure out how many columns are in a table?
<script>
alert($('table').columnCount());
</script>
<table>
<tr>
<td>spans one column</td>
<td colspan="2">spans two columns</td>
<td colspan="3">spans three columns</td>
<tr>
</table>
The total number of columns in this example is 6. How could I determine this using jQuery?

Here you go:
jsFiddle
$(function() {
var colCount = 0;
$('tr:nth-child(1) td').each(function () {
if ($(this).attr('colspan')) {
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
});
});

$("table").find("tr:first td").length;
I edited as I didn't realize you were counting the colspan's.
If you want to include using colspan try a loop through the td's in the first row:
var cols = $("table").find("tr:first td");
var count = 0;
for(var i = 0; i < cols.length; i++)
{
var colspan = cols.eq(i).attr("colspan");
if( colspan && colspan > 1)
{
count += colspan;
}else{
count++;
}
}

This is the cleanest in my opinion. It handles tables within tables. And is short and simple:
$("table > tbody > tr:first > td").length

In POJS (Plain Old JavaScript):
HTML:
<table id="foo">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="3">3</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
JS:
var foo = document.getElementById("foo"), i = 0, j = 0, row, cell, numCols = 0;
//loop through HTMLTableElement.rows (includes thead, tbody, tfoot)
for(i;i<foo.rows.length;i++)
{
row = foo.rows[i];
//loop through HTMLTableRowElement.cells
for(j = 0;j<row.cells.length;j++)
{
cell = row.cells[j];
numCols += cell.colSpan;
cell = null;
}
row = null;
}
alert(numCols) //6;
HTMLTableElement.rows will collect rows from every HTMLTableSectionElement (THead, TBody, and TFoot). Each section also has its own rows HTMLCollection, so you can filter them if need be.

To be robust..I'd do something like this
alert(numCol("table") + " is the max number of cols");
function numCol(table) {
var maxColNum = 0;
var i=0;
var trs = $(table).find("tr");
for ( i=0; i<trs.length; i++ ) {
maxColNum = Math.max(maxColNum, getColForTr(trs[i]));
}
return maxColNum;
}
function getColForTr(tr) {
var tds = $(tr).find("td");
var numCols = 0;
var i=0;
for ( i=0; i<tds.length; i++ ) {
var span = $(tds[i]).attr("colspan");
if ( span )
numCols += parseInt(span);
else {
numCols++;
}
}
return numCols;
}
Just in case we have some funkiness going on between different rows.

http://jsfiddle.net/WvN9u/
Just paying attention to colspan attr

Pass in a table with something like $('foo#table') or $('table:first')
function getColumnCount(e) { //Expects jQuery table object
var c= 0;
e.find('tbody tr:first td').map(function(i,o) { c += ( $(o).attr('colspan') === undefined ? 1 : parseInt($(o).attr('colspan')) ) } );
return c;
}

To circumvent the td/th issue (and also fix a potential issue where attr('colspan') was giving me strings) I went with this:
var colspan = 0;
$('#table').find('tr:first').children().each(function(){
var cs = $(this).attr('colspan');
if(cs > 0){ colspan += Number(cs); }
else{ colspan++; }
});

/**
* Get number of columns in table.
* #param {string} table jQuery selector
* #param {boolean} [malformed=false] whether to inspect each row of malformed table;
* may take some time for large tables
* #returns {?number} number of columns in table, null if table not found.
*/
function getTableColumnsCount(table, malformed) {
malformed = malformed || false;
var $table = $(table);
if (!$table.length) {
return null;
}
var rows = $table.children('thead, tfoot, tbody').children('tr');
if (!malformed) {
// for correct tables one row is enough
rows = rows.first();
}
var maxCount = 0;
rows.each(function () {
var currentCount = 0;
$(this).children('th, td').each(function () {
currentCount += this.colSpan;
});
maxCount = Math.max(maxCount, currentCount);
});
return maxCount;
}
See in action https://jsfiddle.net/kqv7hdg5.
Takes colspan into account.
Works for nested tables.
Works for <thead>, <tfoot>, <tbody>.
Works for mix of <th> and <td>.
Works for malformed tables.
Slightly modified version for those who would like to pass jQuery object instead of selector https://jsfiddle.net/5jL5kqp5.

You have to set an ID to the header row:
<table>
<tr id="headerRow">
<td>spans one column</td>
<td colspan="2">spans two columns</td>
<td colspan="3">spans three columns</td>
</tr>
</table>
And then you can use the following function:
function getColumnCount(headerRowId) {
var columnCount = 0;
$('#' + headerRowId + ' > td').each(function() {
var colspanValue = $(this).attr('colspan');
if (colspanValue == undefined) {
columnCount++;
} else {
columnCount = columnCount + parseInt(colspanValue);
}
});
return columnCount;
}

I simplified answer of Craig M.
And modified to apply to both td and th tag.
function GetColumnCount($Table)
{
var ColCount = 0;
$Table.find("tr").eq(0).find("th,td").each(function ()
{
ColCount += $(this).attr("colspan") ? parseInt($(this).attr("colspan")) : 1;
});
return ColCount;
}

var foo = document.getElementById("price-test-table")
foo.tBodies["0"].firstElementChild.children.length
Give your table an id name
Assume your rows all have the same amount of columns and you have a table body
Use above code, which I think is the simplest on here, similar to first answer
but provides a little more detail

With jQuery and reduce it could look like this:
$.fn.tableCellCount = function() {
return $(this).find('tr:first td, tr:first th').get().reduce(function(a,b) {
return a + ($(b).attr('colspan') ? parseInt($(b).attr('colspan')) : 1);
},0)
}
$('table').tableCellCount();
Or even simpler:
$.fn.tableCellCount = function() {
return $(this).find('tr:first td, tr:first th').get().reduce(function(a,b) {
return a + (b.colSpan ? parseInt(b.colSpan) : 1);
},0)
}
$('table').tableCellCount();

This is the simple solution I have done:
In case you are using TR change TH for TR.
Using JQUERY:
<script>
$(document).ready(function() {
var number = $("table > tbody > tr:first > th").length;
for(var i=0; i <= number; i++){
$('th:nth-child('+ i +')').hide();
}
});
</script>

One Line:
$('.table-responsive tr th').children().length;

function(){
num_columns = 0;
$("table td]").each(function(){
num_columns = num_columns + ($(this).attr('colspan') == undefined ? 1 : $(this).attr('colspan'));
});
return num_columns;
}

jQuery remove elements by condition

I have some tr elements in table:
<table>
<tr id="tr_level_1">...</tr>
<tr id="tr_level_2">...</tr>
<tr id="tr_level_3">...</tr>
<tr id="tr_level_4">...</tr>
<tr id="tr_level_5">...</tr>
</table>
In Javascript I have the next variable:
var levels = 3;
I want to delete all tr's where number in id is more than levels. And if levels is more than number of tr's - adding tr's after last.
Thanls a lot.

Working demo
Try this:
var levels = 3;
$("table tr:gt("+(levels-1)+")").remove();
I substract one because this expression ("gt": greater than) is 0-based index.
For the second part of your question try this:
http://www.jsfiddle.net/dactivo/fADHL/
if($("table tr").length<levels){
//the code here for less than levels
}
else
{
$("table tr:gt("+(levels-1)+")").remove();
}

I think this should complete the answer
var levels = 3;
var $trs = $("table tr");
var currentLevels = $trs.length;
if (currentLevels > levels) {
$trs.filter(":gt(" + (levels - 1) + ")").remove();
} else if (currentLevels < levels) {
var t = "";
for (i = (currentLevels + 1); i <= levels; i++) {
t += '<tr id="tr_level_' + i + '"><td>' + i + '</td></tr>';
}
$trs.parent().after(t);
}
http://jsfiddle.net/c6XWN/1/ <-- levels = 10
http://jsfiddle.net/c6XWN/2/ <-- levels = 5
http://jsfiddle.net/c6XWN/3/ <-- levels = 3
Good luck!

try this
var total = $("#table").find('tr').length;
var levels = 3;
if(levels<=total) {
for(levels=levels;levels<=total;levels++) {
$("#tr_level_"+levels).remove();
}
}
else {
$("#table").append("<tr id=\"tr_level_"+total+1+"\">..</tr>");
// this will add the element with tr_level_6 at the end
}

Maybe this:
function editTr(inVal) {
selector = new RegExp("\d")
var lastID = selector.exec($("table tr").last().attr("id"));
if (lastID > inVal) {
$("table tr").each(function () {
if (selector.exec($(this).attr("id")) > inVal) {
$(this).remove();
}
});
}
else if (lastID < inVal) {
for (x=lastID;x<=inVal;x++) {
$("table").append("<tr id=\"tr_level_"+x+"\"></tr>")
}
}
else {
return null
}
}

var levels = 5;
var lastTr = $('#ranks_percentages tr:last').attr('id');
lastTr = lastTr.split('_');
var lastLevel = lastTr[1];
if (levels < lastLevel) {
//removing
} else {
//adding
}