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.
Related
I have a html code below (created using a plugin).
I need to change colspan="6" to colspan="4".
I tried jQuery below, but it doesn't work...
Would you please help me?
<table class="shop_table">
<thead>
<tr><th></tr></th>
</thead>
<tbody>
<tr><td class="aa"></td></tr>
<tr><td class="bb"></td></tr>
<tr><td class="cc" colspan="6"></td></tr>
<tbody>
</table>
$('.shop_table').find('td:last-child').contents().filter(function() {
return this.nodeType===3;
}).remove().end().end().find('colspan="6"').replaceWith($(('colspan="4"'));
Thank you.
With the selector [colspan="6"] you can get to each and set a new attribute:
$('.shop_table [colspan="6"]').each(function() {
this.setAttribute('colspan', '4');
});
console.log($('table').html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="aa"><td></td></tr>
<tr class="bb"><td></td></tr>
<tr class="cc" colspan="6"><td></td></tr>
<tbody>
</table>
Or, without jQuery:
for (const elm of document.querySelectorAll('.shop_table [colspan="6"]')) {
elm.setAttribute('colspan', '4');
}
console.log(document.querySelector('table').innerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="aa"><td></td></tr>
<tr class="bb"><td></td></tr>
<tr class="cc" colspan="6"><td></td></tr>
<tbody>
</table>
You can use prop() or attr() and both methods will loop through all of them
$('.shop_table td[colspan="6"]').prop('colSpan', 4)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table" border=1>
<thead>
<tr><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th></tr>
</thead>
<tbody>
<tr><td class="aa">222</td></tr>
<tr><td class="bb">333</td></tr>
<tr><td class="cc" colspan="6">444</td></tr>
<tr><td class="aa">222</td></tr>
<tr><td class="bb">333</td></tr>
<tr><td class="cc" colspan="6">444</td></tr>
<tbody>
</table>
Hey a simple answer to your question is this:
$("table tr:last td[colspan=6]").attr('colspan',4);
I select the Table, then the last TR, and then the TD representing the one you want to be changed.
Then I add the attribute colspan 4.
This is a codepen showing it working: https://codepen.io/SweetChillyPhilly/pen/MWJbBPo
And here is the SO question where you can read more about how this solution became to be
Replacing Colspan = "2" with Colspan = "4" using Jquery
DataTable with edit delete buttons for separate rows.
I am new to web development. I have learn to add, edit and delete DataTables. I want to have the functionality of editor data table (like common add edit delete buttons) to work for MySQL data.
I achieved adding new data by using bootstrap modals and connected to db via PHP. I don't know that for edit and delete options. So, I have implemented row wise edit delete buttons.
What am I doing wrong here? I need a code to select the row and edit from common edit button on top and that should change both client and server side.
And is it possible to do that without using Editor-DataTable?
If you can use the extensions, there is a Select extension that you can add that lets you select rows from your table. After that, you could find out what rows are selected on the button press event and create a modal to make your changes or however you want to handle that.
$(document).ready(function() {
var table = $('#example').DataTable({
select: true
});
$("#deleteBtn").on("click", function() {
selectRows = table.rows({
selected: true
});
//perform your delete CRUD update.
//remove from UI
selectRows.remove().draw();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=9a6592f8d74f8f520ff7b22342fa1183"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://nightly.datatables.net/select/css/select.dataTables.css?_=9a6592f8d74f8f520ff7b22342fa1183.css" rel="stylesheet" type="text/css" />
<div class="container">
<button id="deleteBtn">Delete</button>
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
</tr>
</tbody>
</table>
</div>
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>
Below is the source code from my website which shows an empty table produced from a PHP file that had no data to fill it, how can I hide these tables and strip the code from the page if the table is empty.
<form class="cart" method="post" enctype='multipart/form-data'>
<table class="footable" cellspacing="0" class="group_table">
<thead>
<tr id="price-table-custom-header">
<th><center>head1</center></th>
<th><center>Information</center></th>
<th data-sort-initial="true"><center>head3</center></th>
<th><center>Purchase</center></th>
</tr>
</thead>
<tbody> </tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="4">
<div class="pagination pagination-centered">
<ul></ul>
</div>
</td>
</tr>
</tfoot>
</table>
You can verify if the tbody tag is empty and hide the whole table if it is.
$(document).ready(function(){
if ($.trim($(".group_table tbody").text()).length == 0) {
$('.group_table').hide();
}
});
Edit:
Your table has two class attributes, to add two classes, you should do this way:
<table cellspacing="0" class="group_table footable">
Js Fiddle:
https://jsfiddle.net/jsb3z0y4/
Why not check if it has any content and hide it if there isn't any.
var hasContent = $('.group_table tbody').text().trim();
if(!hasContent){
$('.group_table tbody').hide();
}
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());
});