<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
$(function () {
alert($('tr').html());
})
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
I have a simple HTML table. In a JQuery script I tried to alert all rows in the table, but it alerts only one row of table. What does $('tr') actually return?
Why isn't it possible to display all the rows if $('tr').css('background-color', 'red'); can change the colors of all?
html() : Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
You could loop through all the rows using each() and use alert to display the html content :
$('tr').each(function(){
alert($(this).html());
});
Hope this helps.
$(function () {
$('tr').each(function(){
alert($(this).html());
});
});
<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>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You need to get the html for each tr and display the html in two alerts.
This will display your tr is two alert messages:
SCRIPT
$(function () {
$('tr').each(function() {
alert($(this).html());
});
});
See working example at: https://jsfiddle.net/4qb4j6s1/1/
The reason $('tr').css('background-color', 'red'); changes all tr's background color is because the jquery function css is applied to all instances on the of the element unless otherwise specified. Alert(); only displays the first instance of an html element!
In order to display the entire table in one alert you can do:
SCRIPT
alert($('table').html());
Related
The script lets me show the current row text and displays the whole record as a line of text. But I need to access each TD of table to fetch all the data separately from the same row.
Actually, I have a table of persons. So, If I click on a single record then I want to show the details of that person/record on another page. Like a more detailed view of the particular record.
[Script]
<script>
$(document).ready(function(){
$('table tbody tr').click(function(){
var a=$(this).text();
document.write(a);
});
});
</script>
You can parse all the tds in the listener for the clicked row using .each()
$(document).ready(function(){
$('table tbody tr').click(function(){
var a=[];
$(this).find('td').each(function(){
a.push($(this).text());
});
console.log(a);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
There are lots of answers about this but none of them includes any if statement. So, I need something like this:
if($(this) == "last <td> of the row")
How can I do that? Thanks
You can use :last-child selector to test if its the last child of its parents.
From jQuery API Doc:
:last-child
SelectorSelects all elements that are the last child of their parent.
While :last matches only a single element, :last-child can match more than one: one for each parent.
So if you use td:last, you'll only get true when click on 8 in the snippet(and if you don't use td:last but :last, no td will tested true as they're all not the last element in the DOM)
While click on 4 and 8 will both tested true if you use :last-child, as they both are the last td in tr.
$('td').click(function() {
console.log($(this).text());
if ($(this).is(':last-child')) {
console.log('last');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
im traying to get the value of any clicked td and show this in a alert() window with jquery or javascript. I was trayin alote of code around the internet "googling" but anyone can do this but anyways i going to posted here...
$("table tbody").click(function() {
alert($(this).find('td.value').text());
});
$(document).ready(function() {
$('table tbody').find('tr').click(function() {
alert("row find");
alert('You clicked row ' + ($(this).index() + 1));
});
});
$(document).ready(function() {
$('table tbody').click(function() {
var i = $(this).index();
alert('Has clickado sobre el elemento número: ' + i);
});
});
$("table tbody").live('click', function() {
if $(this).index() === 1) {
alert('The third row was clicked'); // Yes the third as it's zero base index
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
Why not attach the click event directly to the td? You also need to make sure you're including jQuery...
$( "td" ).click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
</body>
You need to include jQuery library to start working with it. Then just bind a click event to your td and you should see the alert pop up.
<head>
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript">
// Your code comes here
Also next time if something does not work, the first thing that you are supposed to so id open the console and check if you see any errors and act upon them.
Using console.log instead of alert should be the way to go as alert blocks the UI thread completely.
$("td").click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
I have a html table as below:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
On click of a td I am changing the color of it's next 4 td's and for that I have done it in jquery as below:
$(this).nextAll("td").slice(0, 4).addClass("selected");
Above code is working if I click on 1st TD then it selects further 4 td's but if I click on 4th td then it selects only 5th td. I want it to select another 3 td's in next row as well.
Please tell me how can I fix this?
jQuery .index() method returns the index of passed element in the current set. By using returned index you can .slice() the collection, this is more efficient than querying the DOM on each click, especially when you have a big table:
var $tds = $('#table td').on('click', function() {
var i = $tds.index(this);
$tds.slice(++i, i+4).addClass("selected");
});
http://jsfiddle.net/MamYX/
You can simply add the td of the following row. :
$(this).nextAll("td").add($(this).closest('tr').nextAll().find('td'))
.slice(0, 4).addClass("selected");
Demonstration
var $tds = $('table td').click(function(){
var idx = $tds.index(this);
$tds.filter(':gt(' + idx + '):lt(4)').addClass('selected')
})
Demo: Fiddle
I have a question, I am trying to make some manipulation with html tables. I have two tables,
and when I hover first row from the first table, it should highlight both rows from both tables.
I have found a solution, in making this simple function:
<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5';
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}
</script>
On the first table I have:
<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >
on the second table I have:
<tr id="row1" >
So when I put mouseover the first row from the first table, the first row from the second table highlights.
My question is, how to make it for the every single row, especially if it will be dynamic table.
Hope I was clear.
I've implemented this with jQuery. It doesn't use obtrusive JS and doesn't require additional IDs for rows.
Also, CSS classes are more preferable than inline styles.
HTML:
<table id="t1">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
CSS:
tr.active > td
{
background-color:#f00;
}
JS:
$(function(){
$("#t1 tr").hover(
function(){
$(this).addClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
},
function(){
$(this).removeClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
}
);
});
Here is live fiddle: http://jsfiddle.net/keaukraine/KBEhA/1/
You can use the div id as a parameter in the function
<tr onmouseover="matchrow('row1')" onmouseout="dismatchrow('row1')">
function matchrow(divid){
document.getElementById(divid).style.backgroundcolor='#F5F5F5';
}
function dismatchrow(divid){
document.getElementById(divid).style.backgroundcolor='white';
}
You can use jQuery for this.
Use the .eq() and .index() functions.
A way of doing it:
HTML:
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
</table>
JS:
$('table tr').hover(function()
{
var index = $(this).index();
$('table').each(function()
{
$(this).find('tr').eq(index).css('color', 'red');
});
});
A working example can be found here.