I want to count rows and columns in JS - javascript

I want to use Table class as can be easily implemented in JavaScript as shown in the following code snippet. After having declared the object, we can instantiate it by using the new operator and use its properties and methods.But my code is not working. Please have a look.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:Functions as Variables:</title>
<style>
table {margin-bottom:15px;}
td {padding:10px; text-align:center; border:1px solid #cecece;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
</table>
<script>
function table(row,column) {
this.row = row;
this.column = column;
getCountCell = function(){
return this.rows * this.column;
}
}
var c = new table(3,5);
var t = c.getCountCell();
console.log(t);
</script>
</body>
</html>


You can try this code
(function(){
var rows;
var columns;
this.table = function table(row,column) {
this.rows = row;
this.columns = column;
}
table.prototype.getCountCell = function() {
return this.rows * this.columns;
}
})();
var c = new table(3,5);
var t = c.getCountCell();
console.log(t);
Here is the details about JavaScript prototype constructor


spelling mistakes is a row not rows and apply this in front of this.getCountCell
function table(row,column) {
this.row = row;
this.column = column;
this.getCountCell = function(){
return this.row * this.column;
}
}
var c = new table(3,5);
var t = c.getCountCell();
console.log(t);
table {margin-bottom:15px;}
td {padding:10px; text-align:center; border:1px solid #cecece;}
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
</table>

Related

Alternating color rows based on values of cells

I'd like to have a table with alternating colors of rows but rows with the same value should have unitary background color. Can I achieve such an effect with CSS?
Example:

JQuery
(feel free to simplify and edit this)
$(function() {
let elems = $('tr:not(".head")');
let count = 0;
for (let i=0; i<elems.length; i++) {
let el = $(elems[i]),
prev = $(elems[i-1]);
let isEven = (count % 2 == 0);
if (isEven) {
el.css('background', 'red');
} else {
el.css('background', 'yellow');
}
if (el.text() == prev.text()) {
let clr = prev.css('background');
el.css('background', clr);
} else {
count++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="head">
<th>One</th>
<th>Two</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
</table>

Update a table cell with a randomly generated number

I am very new to javascript. I have only been working with it for a week. I have been trying to update the html table column with a 0 value to a random number generated by javascript. This is what I have tried so far, with the function "plays", but it produces no output. What errors do I have and what am I missing from my code? Any help would be greatly appreciated.
<table class="content-table">
<tbody id="groupH" onload="plays()">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!-- Update points table as page refreshes-->
<script>
function plays(){
document.getElementById("updateDraw").innerHTML = Math.floor(Math.random()* 10);
}
</script>

You can check it
<table class="content-table">
<tbody id="groupH">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!-- Update points table as page refreshes-->
<script>
function plays(){
document.getElementById("updateDraw").innerHTML =
Math.floor(Math.random() * 10);
}
window.onload = function () {
plays();
}
</script>

There is no onload on a tbody element. This is raised when the window loads:
function plays() {
document.getElementById("updateDraw").innerHTML = Math.floor(Math.random() * 10);
}
window.addEventListener("load", plays);
<table class="content-table">
<tbody id="groupH">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>

Another way is to attach the onload call to the <body> tag:
<body onload="plays()">
<table class="content-table">
<tbody id="groupH">
<tr>
<td>4</td>
<td>Poland</td>
<td>3</td>
<td>1</td>
<td id='updateDraw'>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>-3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!-- Update points table as page refreshes-->
<script>
function plays() {
document.getElementById("updateDraw").innerHTML = Math.floor(Math.random() * 10);
}
</script>
</body>

how can i get table column data using column header name in jquery

I am trying to get table column data by using the name of header(th) in jquery.
x1 x2 y1 y2
2 1 2 4
4 4 5 3
7 5 3 4
7 3 1 9
in this case i want to get data by x2 then it should return me 1,4,5,3
my table-
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>122</td>
<td>12</td>
</tr>
</tbody>
</table>

Here's a way using jQuery filter() function and CSS nth-child() selector:
<table border="1" class="dataframe" id="table">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>x2</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>7</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>7</td>
<td>3</td>
<td>1</td>
<td>9</td>
</tr>
</tbody>
</table>
<script>
let chosenHeaderText = 'x2',
tableHeaders = $('#table th'),
chosenHeader = tableHeaders.filter(function(header) {
return tableHeaders[header].innerHTML == chosenHeaderText;
}),
chosenHeaderIndex = chosenHeader[0].cellIndex + 1,
rows = $('#table tr td:nth-child(' + chosenHeaderIndex + ')');
rows.each(function(row) {
console.log(rows[row].innerHTML);
});
</script>
You can replace the chosenHeaderText variable with whichever header you need.

You can utilise jQuery map() function to first get the index of your header and on that basis iterate the body of the table.
const getData = (column) => {
let indx
$('thead').find('th').map(function(i){
if($(this).text() === column)
indx = i
})
$('tbody').find('tr').map(function(i){
let chk = $(this).find('td').eq(indx).text()
console.log(chk)
})
}
let data1 = getData(`x1`)
console.log(data1)
console.log(`=================`)
let data2 = getData(`y1`)
console.log(data2)
console.log(`=================`)
let data3 = getData(`y2`)
console.log(data3)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1A</td>
<td>122</td>
<td>12</td>
</tr>
<tr>
<td>1B</td>
<td>123</td>
<td>13</td>
</tr>
<tr>
<td>1C</td>
<td>124</td>
<td>14</td>
</tr>
</tbody>
</table>

Jquery/JS Select last td in each line which don't have a specific class

I have the following HTML table:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
I would like to get all last elements which don't have the "treegrid-hide-column" class in each line.
How can in do that in CSS or JS ?
I tried doing that but it doesn't works well.
function addRightBorderOnTreetable() {
var arr = $('.treegridCustom tbody tr td:last-child');
for (var i=0; i<arr.length; i++) {
var currentEl = arr[i];
if ( !$(currentEl).hasClass("treegrid-hide-column") ) {
$(currentEl).css('border-right', '1px solid #bfbfbf');
}
}
}

CSS doesn't have this feature, but you can do it with jQuery:
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
We have to go row-by-row because there's no CSS "last element not matching this class", and jQuery's :last applies to the whole set, not the set at each level of thes elector.

If you added a class to your preferred td ?
<table>
<tbody>
<tr>
<td>1</td>
<td class="right-border">2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td class="right-border">5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td class="right-border">8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
And then change the css
.right-border {
border-right: 1px solid #bfbfbf;
}
Or with a js function
function addRightBorderOnTreetable() {
var el = $('.treegridCustom tbody tr .right-border');
el.css('border-right', '1px solid #bfbfbf');
}

you might need to run for loop like this. I think this is what you want to achieve.
$(document).ready(function() {
addRightBorderOnTreetable();
});
function addRightBorderOnTreetable() {
$.each($('tr'),function(){
var arr2 = $(this).find('td');
var j = arr2.length;
for(j=arr2.length; j>-1;j--){
var currentEl = arr2[j - 1];
if (!$(currentEl).hasClass("treegrid-hide-column") ) {
$(currentEl).css('border-right', '1px solid #bfbfbf');
return;
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>

So simple use nth-last-child() here
<script>
$(document).ready(function(){
$( 'table tbody tr td:nth-last-child(2)').css('border-right', '1px solid #bfbfbf');
});
</script>
Jsfiddle

table tr td:not(.treegrid-hide-column):last-child {
border-right: 1px solid #bfbfbf;
}

Select Html row and get selected data

I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
And my javascript codes
<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
if (highLight) {
tableRow.style.backgroundColor = '#dcfac9';
} else {
tableRow.style.backgroundColor = 'white';
}
}
</script>

You can select all td of selected row and get the innerHTML of each td.
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
function readvalues(tableRow){
var columns=tableRow.querySelectorAll("td");
for(var i=0;i<columns.length;i++)
console.log('Column '+i+': '+columns[i].innerHTML );
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

You can do the same thing with pure CSS.
Below is an example, where I have used hover class for true
tr{
background: grey;
}
tr:hover{
background: white;
}
.hover:hover{
background:#dcfac9;
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1" class="hover"
onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"
onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3" class="hover"
onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

If you are using jQuery, you can try something like this. Even more, you can use css instead of changing row colour in javascript.
$('#example tr').click(function() {
var values = $(this).find('td').map(function() {
return $(this).text();
}).get();
console.log(values);
});
table tr:hover {
background-color: #dcfac9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

In case if you want to read current 'tr' or row element's data on click, you can try this using pure javascript:
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script language="javascript">
function readValues(evt){
var elem = evt.target.parentElement;
console.log(elem); //elem contains current tr element's data
}
var elem = document.querySelectorAll("#example tr");
for(var i=0;i<elem.length;i++){
bindMe(elem[i]);
}
function bindMe(elem){
elem.addEventListener("click", function(evt){
readValues(evt);
});
}
</script>
jsfiddle: https://jsfiddle.net/rxvjmvzh/

Categories

Resources