I have a table with the image and image code data, show on code below:
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr id="image_info">
<td id="1W 1111">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td id="2W 2222"></td>
<td id="3W 3333"></td>
</tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
</tbody>
</table>
I tried using this code to get the html of selected td of the table. But it show "undefined".
$('#tblForklift').on('click', function(e) {
var forkliftCode = $('this').closest('tr').find('td').html();
alert(forkliftCode)
});
Since #tblForklift will match your table. You need to target td elements inside this table instead. Also if your elements has been added dynamically to the DOM, you can use event delegation:
$(document).on('click', '#tblForklift tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
or better if your table is not added dynamically:
$('#tblForklift').on('click', 'tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
Also some of your td are missing closing </td>
Add event to the td. so in each td click you can get html.
$('#tblForklift td').on('click',function(e) {
alert($( this ).html());
});
demo
id must be unique use class like,
HTML
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr class="image_info">
<td class="1W 1111 forklift">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td class="2W 2222"></td>
<td class="3W 3333"></td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
SCRIPT
$('.forklift').on('click', function(e) { // using class for multiple tds
var forkliftCode = $(this).find('p').text();
alert(forkliftCode);
});
Also, never give a space in a id, space has a different meaning in jquery selectors
Live Demo
HTML:
<td class="2W 2222">cvbcxbcvb</td>
<td class="3W 3333">bcvbcvbnvnv</td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
jQuery:
$('#tblForklift td').click(function() {
alert($(this).html());
});
Related
I am using this ajax success to clone a tr with its td inside it:
success: function(response){
var file = $(".drop-file").clone();
file.html(response);
$('.myfiles').append(file);
}
This is my html structure:
<tr class="drop-file">
<td class="myFiles"></td>
</tr>
At this moment, this is the output:
<tr class="drop-file">
<td class="myFiles">
<tr class="filename">1.png</tr>
<tr class="filename">2.png</tr>
<tr class="filename">3.png</tr>
</td>
</tr>
But it should be like this:
<tr class="drop-file">
<td class="myFiles">1.png</td>
<td class="myFiles">2.png</td>
<td class="myFiles">3.png</td>
</tr>
How can i achieve that?
You shouldn't clone the <tr>, just clone one of the .myFiles elements, and append it to .drop-files.
var file = $(".myFiles").clone();
file.html(response);
$('.drop-files').append(file);
I am looking for information on the best approach to creating a 'more details' section on a table generated by a MySQL query which is something like this:
<tr>
<th>First Name</th>
<th>Surname</td>
<th>Details</th>
</tr>
<tr>
<td>Joe</td>
<td>Blogs</td>
<td><a class="button-1" href="">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3">...insert details...</th>
</tr>
Each row has a unique id e.g. button-2,3,4 etc that I can use to create a unique class for each details section and I can hide and show the details using JQuery:
$(document).ready(function() {
$('.button-1').click(function(){
var link = $(this);
$('.hidden-1').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('Hide Details');
} else {
link.text('More Details');
}
});
});
});
But my knowledge on JQuery is limited so the only way I could think to call the code would be to use php to create multiple versions. If anyone could point my in the direction of the best approach I would be grateful
check this code. it will help you. here id="view_1",id="show_1" 1 is your dynamic value from database .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Surname</td>
<th>Details</th>
</tr>
<tr>
<td>Joe</td>
<td>Blogs</td>
<td><a class="button-1" id="view_1" href="javascript:void(0)" onclick="show_details(1)">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3" id="show_1">...insert details...</th>
</tr>
<tr>
<td>Joe1</td>
<td>Blogs2</td>
<td><a class="button-1" id="view_2" href="javascript:void(0)" onclick="show_details(2)">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3" id="show_2">...insert details...</th>
</tr>
</table>
<script type="text/javascript">
function show_details(id) {
if ($('#show_'+id).is(':visible')) {
$('#view_'+id).text('More Details');
$('#show_'+id).hide();
} else {
$('#view_'+id).text('Hide Details');
$('#show_'+id).show();
}
}
</script>
<style type="text/css">
.hidden_details {
display: none;
}
</style>
I'm displaying some data in a table and for each row I have another one with some details that is hidden by default and I want to make it visible only when the user clicks a link.
HTML looks like this:
<div id="listing">
<?php for(): ?>
<tr>
<td>Toggle</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="details" style="display: none">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<?php endfor; ?>
</div>
I tried using jQuery like so, but with no results:
$('#listing').on('click', '.toggle', function(e) {
e.preventDefault();
$(this).closest('tr .details').toggle();
});
On each first row element provide it a data-target this will be which class to target and toggle the show/hide.
So basically on click for toggle class we get the data-target use that value to find our target and then simply toggle the target.
JsFiddle : https://jsfiddle.net/63ujphmj/
Javascript
$(function()
{
$('.toggle').on('click', function()
{
var target = $(this).data('target');
$('.'+target).toggle();
});
});
Html
<div id="listing">
<table>
<tr>
<td>Toggle 1</td>
<td>Toggle 2</td>
<td>Toggle 3</td>
<td>Toggle 4</td>
</tr>
<tr class="details">
<td class="details-1" style="display: none">Toggle 1 details</td>
<td class="details-2" style="display: none">Toggle 2 details</td>
<td class="details-3" style="display: none">Toggle 3 details</td>
<td class="details-4" style="display: none">Toggle 4 details</td>
</tr>
</table>
</div>
Assuming you fix the invalid HTML and include <table> tags, you want to use:
$('#listing').on('click', '.toggle', function(e) {
e.preventDefault();
$(this).closest('tr').next('.details').toggle();
});
You need to use .closest('tr') to traverse up in the DOM from the button clicked to the parent row, then .next('.details') to move to the next row element.
I have a table generated by jQuery, and a function that triggers an event when pressing ENTER.
The table generates correctly, but the function only works in the first wor of the table.
My html for the table is as follows:
<table border="1" id="PlantillaTable" name="PlantillaTable">
<tbody>
<tr>
<th rowspan="2" scope="col">Cargo</th>
<th colspan="12" scope="col">Escenario de Registro</th>
</tr>
<tr>
<td colspan="2">Folio</td>
<td colspan="2">Propietario</td>
<td >Grupo</td>
<td >Edad</td>
<td colspan="2">Folio</td>
<td colspan="2">Suplente</td>
<td >Grupo</td>
<td >Edad</td>
</tr>
<tr id="FilaTable">
<th scope="row" col="1" row="1">Cargo</th>
<td col="2" row="1">LISTA</td>
<td col="3" row="1">
<input type="text" id="AspiranteField" name="AspiranteField" placeholder="FOLIO" />
</td>
<td col="4" row="1">FOTO</td>
<td col="5" row="1">NOMBRE</td>
<td col="6" row="1">GRUPO</td>
<td col="7" row="1">EDAD</td>
<td col="8" row="1">LISTA</td>
<td col="9" row="1">
<input type="text" id="AspiranteField" name="AspiranteField" placeholder="FOLIO" />
</td>
<td col="10" row="1">FOTO</td>
<td col="11" row="1">NOMBRE</td>
<td col="12" row="1">GRUPO</td>
<td col="13" row="1">EDAD</td>
</tr>
</tbody>
And my function is as follows:
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
$('input').pressEnter(function(){
var trid = ($(this).closest('tr').attr('id'));
var opcion = ($(this).closest('td').index());
var valor = $(this).val();
$.getJSON("php/getAspiranteNombre.php?AspiranteId="+valor,function(data){
$.each(data,function(index,item) {
if(opcion < 4)
{
$("#"+trid+" td").eq(3).html('<p>'+item.NAME+'</p>');
$("#"+trid+" td").eq(4).html('<p>'+item.GRUPO+'</p>');
$.getJSON("php/getFoto.php?AspiranteId="+valor,function(data2){
$("#"+trid+" td").eq(2).html('<img src="aspiranteFoto/thumb_'+data2+'" width="50px" height="50px"/>');
});
$.getJSON("php/getEdad.php?Nacimiento="+item.EDAD,function(data3){
$("#"+trid+" td").eq(5).html('<p>'+data3+'</p>');
});
}
else
{
$("#"+trid+" td").eq(9).html('<p>'+item.NAME+'</p>');
$("#"+trid+" td").eq(10).html('<p>'+item.GRUPO+'</p>');
$.getJSON("php/getFoto.php?AspiranteId="+valor,function(data2){
$("#"+trid+" td").eq(8).html('<img src="aspiranteFoto/thumb_'+data2+'" width="50px" height="50px"/>');
});
$.getJSON("php/getEdad.php?Nacimiento="+item.EDAD,function(data3){
$("#"+trid+" td").eq(11).html('<p>'+data3+'</p>');
});
}
});
});
})
Which basically asks for a value in a database and places it in the spaces. The problem is that, in the first row of the table (dynamically generated) the function works perfectly, but in the subsequent rows it doesn't do anything.
Thanks in advance for your help!
You have to change the way to this one:
$("#PlantillaTable").find("input").keyup(function(ev) {
if (ev.which === 13 ) {
//yout code here...
}
});
Attaches to all input values inside this table the enter button handler.
http://jsfiddle.net/csdtesting/jkfL2v5s/
You first have to loop through each tr separately, then you can target the td's inside.
You can loop through the rows using $.each() like this:
$("table tr").each(function(i,v){
$(this).find("td:eq(3)").html('<p>'+item.NAME+'</p>');
....
});
and it will go through all your rows, not just the first one.
Hello people i have this code....
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com /ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$(".mytableCol3").click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});
</script>
<style>
.on { background-color:red; color:#ffffff; }
</style>
</head>
<body>
<table class="mytable" border=1>
<tbody>
<tr>
<td class="mytableCol3">google</td>
</tr>
<tr>
<td class="mytableCol3">yahoo</td>
</tr>
<tr>
<td class="mytableCol3">bing</td>
</tr>
</tbody>
</table>
<table class="mytable" border=1>
</body>
</html>
above code is working fine by toggling red color between cells and it also redirects page to "specific location" when clicked on it.please check the demo ,you can observ first the cell goes red color then it will be redirected to google/yahoo/bing ,but now what iam need to do when they come back to by clicking back button /(code what i write) ,specific cell which was selected should still be highlighted with red color.... i reied doing this by session but not exactly.. can any one plzz help me to fix this....
You can do that with $.cookie
Assign an ID for each line and set cookie, then check that cookie for an available id:
<table class="mytable" border=1>
<tbody>
<tr>
<td class="mytableCol3" id="google">google</td>
</tr>
<tr>
<td class="mytableCol3" id="yahoo">yahoo</td>
</tr>
<tr>
<td class="mytableCol3" id="bing">bing</td>
</tr>
</tbody>
</table>
and javascript:
$(function(){
$(".mytableCol3").click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
$.cookie('clicked', $(this).attr('id'));
});
if($('#'+$.cookie('clicked'))){
$('#'+$.cookie('clicked')).addClass('on');
}
});
You can use plain javascript for cookie, I used that plugin for example.