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>
Related
I'm trying to get a notification when a table is clicked, more specifically the headers. But for some reason the following code is resulting in no action happening.
$(document).ready(function(){
$('[data-sort="true"]').on('click', function(){
console.log('click!');
});
});
My Table looks something like this:
<table id="tldPricingTable" data-sort="true">
<thead>
<tr>
....
</tr>
</thead>
<tbody>
....
</tbody>
</table>
What am I missing?
your code works ok (see https://jsfiddle.net/m8hd1au6/6/)
<table id="tldPricingTable" data-sort="true">
<thead>
<tr>
<th>Hello</th>
</tr>
</thead>
<tbody>
<td>Hello</td>
</tbody>
</table>
<script>
$(document).ready(function(){
$('[data-sort="true"]').on('click', function(){
console.log('click!');
});
});
</script>
How can I insert something after the second form with mform class, for this markup:
<table id="sortme">
<tr>
<td>1</td>
<td><form class="mform"></form></td>
</tr>
<tr>
<td>2</td>
<td><form class="mform"></form><!---Insert Me here !---></td>
</tr>
<tr>
<td>3</td>
<td><form class="mform"></form></td>
</tr>
</table>
To insert after the first form, I can use:
$(function () {
$('<div>block</div>').insertAfter("#sortme form.mform:first");
});
so I've tried this code for the second, didn't work:
$(function () {
$('<div>block</div>').insertAfter("#sortme > form.mform:nth-child(2)");
});
Try .insertAfter("#sortme form.mform:eq(1)");
You, also, may use a counter, conditional statement and append as follows:
<script>
$(document).ready(function(){
counter = 0;
$(".mform").each(function(){
if (counter === 1){
$(this).append("<div>Block</div>");
}
counter++;
});
});
</script>
A demo is HERE
I got this code:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('td').click(function() {
if($('#edit').length == 0) {
var idz = $(this).parent().attr('id');
var textz = $(this).text();
var rowz = $(this).attr('id');
$(this).append('<textarea id=\"edit\" style=\"position:absolute;left:0;top:0;z-index:1;\">'+textz+'</textarea>').focus();
}
});
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
});
</script>
<div class="table">
<table>
<tr>
<td>ID</td>
<td>Client</td>
<td>Category</td>
<td>Active</td>
</tr>
<tr id="2">
<td>2</td>
<td>Client 2</td>
<td>1</td>
<td>1</td>
</tr>
<tr id="1">
<td>1</td>
<td>Client 1</td>
<td>2</td>
<td>1</td>
</tr>
</table></div>
What I'm trying to do here is to intercept a click on any table cell and open a small textarea with the cell's value. IT WORKS OKAY.
But the peoblem is I'm trying to close the textarea by clicking elsewhere but not the #edit. So, this part of code doesn't work:
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
I tried various ways of if/else statements, one if in another and so on and it still doesn't work. Please give me a hint of what's wrong with me.
The #edit element doesn't exist on first pageload, so the event handler is never bound as the condition fails.
Also, html:not(#edit) is usually not the way to go, attach the event handler to the document and check if the click originated from within #edit, if not remove #edit.
Change this
if($('#edit').length > 0) {
$('html:not(#edit)').click(function() {
$('#edit').remove();
});
}
to
$(document).on('mousedown', function(e) {
if ( ! $(e.target).closest('#edit').length )
$('#edit').remove();
});
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.
I have this code
JavaScript:
var J = jQuery.noConflict();
J('#example tr').click( function() {
//HERE THE CODE I WANT
} );
HTML:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Immat</th>
<th>Marque</th>
<th>Modèle</th>
<th>Contrat</th>
<th>Début Contrat</th>
<th>Fin Contrat</th>
<th>CoûtHT/mois</th>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
In a loop i want to get the text ( text() method ) of each td tag under the tr tab that user had clicked.
How can i do this ?
Use .find and .eachh to solve your problem.
J('#example tr').click( function() {
J(this).find("td").each(function() {
alert(J(this).text()); // or whatever else you want to do with the text
});
});
J('#example tr').click( function() {
var text="";
J(this).children("td").each(function(){
text += J(this).text();
});
alert(text);
});
Also noticed in your code the <THEAD> tag is not closed. This code may not work, if you leave that open.