I have a table which will output the id of the parent cell when it is clicked. How could I change this so it outputs more than one clicked cell. For example, right now if I click cell id '1' it will output 1. If I click cell '2' it will output 2 and so on. How can I make it so that it outputs '1,2,3' given that I've clicked on cell 1, 2 and 3.
HTML:
<table>
<tr>
<td class='test' id='1'><img src='images/Dog.gif'/></td>
<td class='test' id='2'><img src='images/Cat.gif'/></td>
<td class='test' id='3'><img src='images/Mouse.gif'/></td>
<td class='test' id='4'><img src='images/Human.gif'/></td>
</tr>
</table>
<div id='output'></div>
JS:
$(document).ready(function() {
$('td.test').click(function() {
$('#output').text(this.id);
});
});
Also, is there a way that if I clicked back on say, cell 2. it would remove '2' from the list.
Use an array to keep track of clicked items:
$(document).ready(function() {
var clicked = [];
$('td.test').click(function() {
var found = clicked.indexOf(this.id);
// Remove
if(found !== -1) {
clicked.splice(found, 1);
// Add
} else {
clicked.push(this.id);
}
$('#output').text(clicked.join(','));
});
});
http://jsfiddle.net/mx2kj/
var ids = "";
$(".test").on("click", function () {
$(this).data("selected", !$(this).data("selected"));
var ids = $(".test").filter(function () {
return $(this).data("selected") === true;
}).map(function () {
return this.id;
}).get().join(",");
alert(ids);
});
Demo: http://jsfiddle.net/fY5tj/1
You can append your clicked item id in your output div like this :
$('td.test').click(function() {
var currentText = $("#output").text();
$("#output").text(currentText+this.id);
});
Related
I have a simple table. When a user clicks on a row, a jscript gets triggered. How can I get a value from row/cell to use in jscript to check true or false please? There is also a seperate click-row script but ignore that for now.
<tbody>
#if (Model != null)
{
foreach (CELIntranet.Models.tblReportsList item in Model)
{
<tr class="clickable-row" id="myid" data-mydata1=UserPermission href="#Url.Action("ShowReport", new { ReportViewName = item.ReportViewName,
ReportController = item.ReportController, UserPermission = (User.IsInRole(item.ReportUserRoles) || User.IsInRole("Administrator")) })">
<td>#Html.Raw(item.ReportNumber)</td>
<td>#Html.Raw(item.ReportName)</td>
<td>#Html.Raw(item.ReportGroup)</td>
<td>#Html.Raw(item.ReportStatus)</td>
#if (User.IsInRole(item.ReportUserRoles) || User.IsInRole("Administrator"))
{
<td style="color:dodgerblue">Granted</td>
}
else
{
<td style="color:orangered">Restricted</td>
}
</tr>
}
}
</tbody>
<script type="text/javascript">
$(function () {
var ClickedTableRowCellValue = ("Need some code to get UserPermission value from the clicked row");
$('table > tbody > tr').click(function () {
if (ClickedTableRowCellValue == True) {
alert("Granted");
Popup();
}
alert("Restricted");
});
});
</script>
// Click row ignore this code for now!
#section Scripts {
<script type="text/javascript">
var clicker = new TableCliker();
$(document).ready(function () {
clicker.Initialise();
//alert("Test");
//Popup();
});
</script>
Try to change your html like this:
<tr class="clickable-row" id="myid" onclick="test(this)" UserPermission = "#(User.IsInRole(item.ReportUserRoles) || User.IsInRole("Administrator"))" data-mydata1=UserPermission href="#Url.Action("ShowReport", new { ReportViewName = item.ReportViewName,
ReportController = item.ReportController, UserPermission = (User.IsInRole(item.ReportUserRoles) || User.IsInRole("Administrator")) })">
So that you can add UserPermission attribute to <tr></tr>.Here is the js:
function test(t){
var ClickedTableRowCellValue = $(t).attr("UserPermission").
if (ClickedTableRowCellValue == True) {
alert("Granted");
Popup();
}
alert("Restricted");
}
Since the click() event returns the exact element that was clicked you can simply use this (the element that is clicked). And get the attribute UserPermission.
$('tr').click(function () {
var authorized = $(this).attr("UserPermission");
if (authorized) { // you don't need to state == true since it will compare to true by default
alert("Granted");
Popup();
}
alert("Restricted");
});
I have a table that I'm filtering by using a select option, but I can't figure out how to go back and show all data after the initial filter. Also I need help drying my code.
// SHOWS INDIVIDUAL FILTER BUT CAN'T SHOW ALL
$(document).ready(function($) {
$("#sortAwardType").change(function() {
$("table").show();
var selection = $(this).val().toUpperCase();
var dataset = $(".awards-body").find("tr");
dataset.show();
if(selection) {
dataset.filter(function(index, item) {
// Filter shows table row with the word 'General'
return $(item).find(":contains('General')").text().toUpperCase().indexOf(selection) === -1;}).hide();
} else {
// .all corresponds to a "Show All" option. When selected the data doesn't show
$("#sortAwardTable").change(function(){
$(".all").dataset.show();
});
}
});
});
// ATTEMPTING DRY CODE. NOW I CAN'T FILTER AT ALL
$(document).ready(function($) {
$("#sortAwardType").change(function() {
$("table").show();
var selection = $(this).val().toUpperCase();
var dataset = $(".awards-body").find("tr");
var match = [
":contains('General')",
":contains('Free')",
":contains('Regional')",
":contains('Demographic')"];
dataset.show();
if(selection) {
dataset.filter(function(index, item) {
return $(item).find(match).text().toUpperCase().indexOf(selection) === -1;}).hide();
} else {
// .all corresponds to a "Show All" option. When selected I want all data to show but instead it only shows an empty table (header present but no rows)
$("#sortAwardTable").change(function(){
$(".all").dataset.show();
});
}
});
});
I don't want to keep repeating the if block only to change the ":contains('_____')". I tried grouping them in an array and assigning them to var match, but then the filter doesn't work.
salam , you have just to put all contains selectors in the same string
$(item).find(":contains('General'),:contains('Free'),:contains('Regional'),:contains('Demographic')").
but if you want take it easy follow my ex:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchBox">
<table id='testTable'>
<tr >
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr >
<td>ab</td>
<td>bc</td>
<td>cd</td>
</tr>
<tr >
<td>zz</td>
<td>ee</td>
<td>ff</td>
</tr>
</table>
<script>
$('#searchBox').keyup(function(){
var val = $(this).val().toLowerCase();
if(val ===""){
$("#testTable > tbody > tr").toggle(true);
return;
}
$("#testTable > tbody > tr").toggle(false);
$("#testTable").find("td").each(function(){
if($(this).text().toLowerCase().indexOf(val)>-1)
$(this).parent().toggle(true);
});
});
</script>
I have a monthly calendar which displays days with events happening in this day. This is how generated HTML looks like:
<table class="event-cal">
<tbody>
<tr class="eventcont event-93">
<td class="eventtime">19:00</td>
<td><a class="calendar-title" href="#>Event title</a><br></td></tr>
<tr class="eventcont event-237">
<td class="eventtime">13:00</td>
<td><a class="calendar-title" href="#">Event 2 title</a><br></td></tr>
</tbody>
</table>
What I want to do is to order tr.eventcont elements based on contents of .eventtime child element. Ordering has to be done within .event-cal element which contains these particular .eventcont elements because I will have several .event-cal elements in the page.
Here is the code I have so far but what it does it takes all tr.eventcont elements from page and pastes them all into each .event-cal table.
$( document ).ready(function() {
var list = $(".event-cal").find(".eventcont");
list.sort(sortDesc);
$(".event-cal").html("");
$(".event-cal").append(list);
});
function sortDesc(a, b){
var test1 = jQuery(a);
var test2 = jQuery(b);
return test1.find(".eventtime").text() > test2.find(".eventtime").text();
}
You need to run your function for each table using jquery.fn.each
$('.event-cal').each(function() {
var table = $(this),
list = table.find('.eventcont').sort(sortDesc);
table.empty().append(list);
});
Check this fiddle
$(".event-cal").each(function(){
var events=$('tr',this);
events.sort(function (a, b) {
a = parseInt($('.eventtime',a).text().replace(':',''));
b = parseInt($('.eventtime',b).text().replace(':',''));
if(a > b) {
return 1;
} else if(a < b) {
return -1;
} else {
return 0;
}
});
$(this).html(events);
});
I have a table where one td gets 1 if a checkbox is checked and I would like to multiple this td with another and display it in a third one.
See the html here:
<div>
<input type="checkbox" id="fut1">check</input>
</div>
<table border="1" cellpadding="10" id="countit">
<tr>
<td id="td1"></td>
<td id="td2">5000</td>
<td id="td3"></td>
</tr>
</table>
And here is the js:
$('#fut1').change(function () {
if ($(this).is(":checked")) {
$('#td1').text('1');
} else {
$('#td1').text('0');
}
});
$('#td1').change(function () {
var me = $('#td1').value;
var ar = $('#td2').value;
var sum = me * ar;
$('#td3').text(sum);
});
$('#td1').change(function () { // <--- td elements don't have a change event listener/handler
var me = $('#td1').value; // <--- td elements don't have a value
var ar = $('#td2').value; // <--- td elements don't have a value
var sum = me * ar;
$('#td3').text(sum);
});
If you want to do it this way:
$('#fut1').change(function () {
if ($(this).is(":checked")) {
$('#td1').text('1');
} else {
$('#td1').text('0');
}
callTdChange();
});
function callTdChange() {
var me = parseInt($('#td1').text());
var ar = parseInt($('#td2').text());
var sum = me * ar;
$('#td3').text(sum);
}
Of course, the better way should be to use form elements (inputs) in the case you want to save your data to a server, or use change behaviors.
#td1 doesn't support the change event, because that's only meant for interactive elements (like input, select, or textarea).
You can either do the calculation in your first event listener in #fut1, or declare an input element inside #td1.
I would like the following script to move a table row to the top of a table. I can't figure out how to reference the id of the first row, however, since the ID is set dynamically, I tried row.insertAfter(row.first()); but it's making the row disappear instead of moving it. Any ideas how to reference the top row?
$(".top").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".top")) {
row.inserAfter(row.first());
} else {
return false;
}
});
<tbody id="sortable">
<tr id="row1">
<td>Top</td>
</tr>
<tr id="row2">
<td>Top</td>
</tr>
<tr id="row3">
<td>Top</td>
</tr>
</tbody>
This works...
$(".top").click(function() {
var thisRow = $(this).parent().parent();
var firstRow = thisRow.parent().find("tr:first").not(thisRow);
thisRow.insertBefore(firstRow);
});
$(".top").click(function(){
var tr=this.parentNode.parentNode;
tr.parentNode.insertBefore(tr.parentNode.firstChild,tr);
tr.parentNode.removeChild(tr);
}
Do you wanna do something like this?
$(".top").click(function(){
var $this = $(this); // make a reference to the current element
$.ajax({
url: 'your/ajax/url.php',
success: function(data) {
// do what you want with data,
// and then move the row on top
// of the table, like so
var row = $this.parents("tr");
var first_row = row.parent().find('tr:first');
if (row && first_row && row != first_row) {
row.insertBefore(first_row);
}
}
});
return false; // stay on the page
});
Check http://api.jquery.com/jQuery.ajax/ for more info
var row = $(this).find("tr").eq(0);