i have a html table with 10 column (i.e 1 2 3 4 5 6 7 8 9 10 ) and i want to flip columns hortizontally (i.e 10 9 8 7 6 5 4 3 2 1 ) using Jquery...
i have below code for this but this code is very long
can anyone provide short code for this..
$(function() {
jQuery.each($("table tr"), function() {
$(this).children(":eq(9)").after($(this).children(":eq(0)"));
$(this).children(":eq(8)").after($(this).children(":eq(0)"));
$(this).children(":eq(7)").after($(this).children(":eq(0)"));
$(this).children(":eq(6)").after($(this).children(":eq(0)"));
$(this).children(":eq(5)").after($(this).children(":eq(0)"));
$(this).children(":eq(4)").after($(this).children(":eq(0)"));
$(this).children(":eq(3)").after($(this).children(":eq(0)"));
$(this).children(":eq(2)").after($(this).children(":eq(0)"));
$(this).children(":eq(1)").after($(this).children(":eq(0)"));
});
});
To achieve this you could build an array from the td elements within each row, reverse() it, then append them back again:
$('table tr').each(function() {
var tds = $(this).children('td').get().reverse();
$(this).append(tds);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
Loop through tds and in loop use .prepend() to inserting element in first of parent.
$("table td").each(function() {
$(this).parent().prepend(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
Update:
#NoumanSaeed: html table with 11 column (i.e 1 2 3 4 5 6 7 8 9 10 Header) and i want to flip columns horizontally (i.e 10 9 8 7 6 5 4 3 2 1 Header)
In this case you should exclude last td contain header in selector using :lt().
$("table td:lt(10)").each(function() {
$(this).parent().prepend(this);
});
$("table td:lt(10)").each(function() {
$(this).parent().prepend(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>Header</td>
</tr>
</table>
The answers above are correct but you can also do with css.
NOTE Solution is not for table with pagination but if the data is short (one page only) you can give it a try!
if($("html").attr("dir") == "rtl") {
$("table").css({"direction": "ltr"});
}else{
$("table").css({"direction": "rtl"});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
Related
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>
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>
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>
I have a row in a table with the head of the row and 96 cells.
Each row is clickable by the following function
$("#table tr").click(function(){});
Now by getting value from 0 to 96, I need to get the td in the place X and do a colspan on it.
As in the form, I get value 40 I need to make the colspan on the 40th td in the clicked row.
How can I implement something like that in JavaScript or jQuery?
Thank's to Pete comment I've got how to get td to which change the attribute, the problem now is if I colspan the cell the table become deformed as on the screen
You can try something like this. You need to add colspan attribute first and then need to remove last cells as below:
$(document).ready(function(){
$("#tables tr").click(function() {
let position = 2;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
$(`td:eq(${position+colspan})`, this).nextAll().remove();
});
});
Hope it helps you ;)
You could use the jQuery selector :eq() to get the position you want with the prop() method that will set the colspan attribute, like :
$("#table tr").click(function() {
let position = 5;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
This question already has answers here:
Table row and column number in jQuery
(6 answers)
Closed 7 years ago.
I have some rows in table having classes like:
<tr class="DrillDownRow">
<td>211</td>
<td>namex</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
</tr>
<tr class="DrillDownRow">
<td>212</td>
<td>namey</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>3</td>
</tr>
now when one row clicked i get it in jquery and perform some work. Now i want to get index of td on which mouse clicked:
$(document).ready(function() {
$('.DrillDownRow').css('cursor','pointer');
$(document).on('click',".DrillDownRow", function(){
//here i want to check on which td it clicked, like index number of clicked td.
});
});
Try using cellIndex.
$('.DrillDownRow td').click(function(){
var td = this.cellIndex
console.log(td)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr class="DrillDownRow">
<td>211</td>
<td>namex</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
</tr>
<tr class="DrillDownRow">
<td>212</td>
<td>namey</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>3</td>
</tr>
</table>
$('.DrillDownRow td').click(function(){
var td = $(this).text();
console.log(td)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr class="DrillDownRow">
<td>211</td>
<td>namex</td>
<td>4</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
</tr>
<tr class="DrillDownRow">
<td>212</td>
<td>namey</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>3</td>
</tr>
</table>
Try this way.
In your click event add td to get the click event of td