Select Html row and get selected data - javascript

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/

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>

Get Data from HTML Table with Jquery (Or other ways if possible)

I have a really big HTML Table with data formatted like this (a simplified version of my table):
https://pastebin.com/K5UB4cGB
The list is much bigger.
I need to know which Application runs on which Server(multiple).
I now need to somehow get all the data and store it (maybe in an array) so I can work with it.
(For example I need to compare certain applications and write a code to document it.)
I've already tried many methods I found on the web but I not sure im working in the right way.
My recent atempt is:
var data = Array();
$("table").each(function(i, v) {
data[i] = Array();
$(this).each(function(ii, vv) {
data[i][ii] = $(this).text();
});
})
document.write(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>
Outputs:
1 2 3 4 6 7 8 9 10
With this method I get one array:
1,2,3,4,5,6,7,8,9,10
But I cannot access the stored vaules because for example data[0] outputs all the values and not only one.
Sorry for the long text
Thanks for your help :)
Kind Regards,
Markus

You can try using nested for loops and get a nested array of data.
let data = [];
$("table tr").each(function() {
let row = [];
$(this).children("td").each(function() {
row.push($(this).text());
})
data.push(row);
})
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

You need to iterate rows and within rows iterate cells
You can do this all with map()
var data = $('tr').map(function() {
return [$(this).children().map(function() {
return $(this).text().trim()
}).get()];
}).get();
console.log(JSON.stringify(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>

use each to loop through td and get its text value
var val=[]
$('#table td').each(function(e){
val.push($(this).text())
})
console.log(val)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

In the following I am using an each function to derive the data of the table and then pushing into an array list. I hope this code is helpful. This code is really small.
var arr = [];
$("th, td").each(function(){
arr.push($(this).text());
$("#result").text(arr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>

Fixed row inside a horizontally scrollable table

I have a very long table with horizontal scrolling. Is it possible to implement a fixed row inside this table without horizontal scroll.
<div class="container" style="width:500px;height:100px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;height:200px;left:0;right:0">
<td colspan="7" style="width:500px;">
<div id="noscroll" style="display: inline-block;">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
EDIT: What if I need two cell in the fixed row?
<tr class="fixed-row">
<td colspan="3">
A row unaffected by
</td>
<td colspan="3">
horizontal scroll
</td>
</tr>
https://jsfiddle.net/7nz6ys2m/2/

Try the following:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0">
<td colspan="7" style="width:500px;height:22px;position: relative;">
<div id="noscroll" style="display: inline-block;position: fixed;transform: translateY(-50%);">
A row unaffected by horizontal scroll
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
What I did:
Give the noscroll-div position:fixed; and reset its position with transform. Then I set the height of its parent td to a fixed height of 22px (the other td are all 22px) and set its position to relative.
In case you need multiple td in the fixed row, I would rather take multiple div inside one td, and float them left. see this:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0;height:22px;position: relative;">
<td style="position: fixed;" colspan="7">
<div style="width:250px;float: left;">
test1
</div>
<div style="width:250px;float:left;">
test2
</div>
</div>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>

With a little bit of jQuery, we can get the behavior with safe vertical scrolling.
<div class="container" style="width:500px;height:300px;overflow:auto;">
<table style="width:1500px;height:500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr style="">
<td colspan="6" style="">
<div class="fixed-row">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(".container").scroll(function () {
$(".fixed-row").css("margin-left",$(".container").scrollLeft() + "px");
});
</script>
<style>
table{
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
.fixed-row {
display: inline-block;
width: 500px;
text-align: center;
}
</style>
https://jsfiddle.net/7nz6ys2m/4/

Two tables columns interchange draggable and droppable

I want to interchange columns in two tables.if "a" is selected and dragged all "1" should move automatically.
http://jsfiddle.net/9LGrm/
<table id="a">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
<table id="b">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
I have tried this plugin:
http://www.danvk.org/wp/dragtable/
https://github.com/jebaird/dragtable
it uses single table I can't change the structure of the table!

Here is the Solution.
The HTML:
<table class="draggable" id="a"><thead><tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr></thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
</tbody><tfoot></tfoot></table>
The CSS:
#a
{
border: 1px black;
}
th{font-weight:normal;}
Hope this helps.

Categories

Resources