I want to open up either picture a or b (if available) with fancybox 3 from any td without a certain class. The pictures should be shown as they are when clicking on the button.
I have included bootstrap, fancybox and jquery. Also i use icons from material icons. Fancybox works perfectly when opening from button.
<table>
<tbody>
<tr>
<td style="cursor:pointer" id="abc">
abc
</td>
<td style="cursor:pointer" id="def">
def
</td>
<td class="1234">
<div class="btn-group float-right" role="group"style="display:flex;">
<#if a??>
<a type="button" class="btn btn-secondary btn-sm"
data-fancybox="test" data-type="image"
data-thumb="${a}" data caption="abc" rel="group"
href="${a}" title="View browser screenshot">
<i class="material-icons md-14"
aria hidden="true">photo_camera</i>
</a>
</#if>
<#if b??>
<a type="button" class="btn btn-secondary btn-sm"
data-fancybox="test" data-type="image"
data-thumb="${a}" data caption="abc"
rel="group" href="${a}"
title="View browser screenshot">
<i class="material-icons md-14"
aria-hidden="true">remove_red_eye</i>
</a>
</#if>`
</div>
</td>
</tr>
</tbody>
</table>
I tried this jquery code:
(Solution for another fancybox question on SO)
$(".table > tbody > tr > td").bind('click',function(e) {
e.stopPropagation();
if (!$(this).hasClass("1234")) {
$(this).find("a").trigger('click');
}
});
and (obviously for tr insted of td)
$('.table > tbody > tr').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
and
$(document).ready(function(){
$('td').on('click', function() {
if (!$(this).hasClass("1234")) {
$.fancybox();
}
});
});
Simply remove all your fancybox related tags from <a> element and add to <td> element, because it does not matter what HTML elements are you using as trigger elements for fancybox.
If some body is interested in the way i found a solution:
$(document).ready(function(){
$(".table > tbody > tr > td").bind('click',function(e) {
var name = $(this).attr('name');
e.stopPropagation();
if (!$(this).hasClass("1234")) {
$("#" + name).find("a:first").trigger('click');
}
});
});
Related
I'm trying to replace the text and css of the 3rd column of a certain table row,
I have unique id from button on each row..
Iv'ed seen some doing this $('#feedbacks tr:nth-child(3) td')
here's a row from my table
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">awdawd</td>
<td>awdawd#dawd.com</td>
<td>
<span class="text-success">Opened</span>
</td>
<td>04:16PM Wednesday - 21st Aug 2019</td>
<td class=" text-center">
<button type="button" rel="tooltip" title="view" class="btn btn-simple btn-info btn-icon view" id="77">
<i class="material-icons">pageview</i>
</button>
</td>
</tr>
Assume that on click each tr view button you want to change 3rd td span class and text. Then do as follows -
$(document).on('click', '.view', function(){
$(this).parents('tr').find('td:nth-child(3) span').text("Unread").removeClass("text-success").addClass("text-error");
});
In this case, you can change the text by using Jquery like below.
are you changing your table content on every row's button click? then
$('.view').on('click',function(){
$(this).parents('tr').find('span').html('changed Text').css('color','#fdcc');
});
or like this
$("td:nth-child(3)").css("background-color", "yellow");
try this selector.
tr td:nth-child(3)
Better to have a unique ID for the table
mytable tr td:nth-child(3)
I have a table, with innumerable rows, when I click the button, I need to get the line id that the button is clicked on. How can I do this?
my attempt code:
function teste(){
$('table tr').each(function(){
var name = $(this).parent().find('.idServico').html();
alert(name);
});
}
my table that my js generate:
tabelaResultado.innerHTML += `
<tr>
<td class="idServico">${idServico}</td>
<td>${dataEntradaServico}</td>
<td>${dataSaidaServico}</td>
<td>${cpfPessoa}</td>
<td>${idStatus}</td>
<td>${descricaoServico}</td>
<td class="actions tirarCor">
<a class="btn btn-success btn-xs" href="/updateService">Visualizar</a>
<a class="btn btn-warning btn-xs" href="/updateService">Editar</a>
<button id="botaoExcluir" class="btn btn-danger btn-xs" onclick="teste()"data-toggle="modal" data-target="#delete-modal">Excluir</button>
</td>
</tr>
Remove the inline event handler from your button and setup an event listener with jQuery. Then you can use $(this) to refer to the button being clicked, .closest() to traverse upward to the parent <tr>, and .find() to get the <td> with the class idServico:
$('button.btn.btn-danger.btn-xs').click(function(){
var name = $(this).closest('tr').find('td.idServico').html();
alert(name);
})
If the rows are being added dynamically, you should instead use a delegated event handler:
$(document).on('click' ,'button.btn.btn-danger.btn-xs' ,function(){
var name = $(this).closest('tr').find('td.idServico').html();
alert(name);
})
My code in HTML :
<td id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
and Jquery :
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
}
But when i click "Show" , it's not working.
You can't have a standalone <td> without a table and table row surrounding it. As soon as you write valid markup, it works:
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
</tr>
</table>
As suggested in other answers already, an ID is already a unique identifier for a DOM element, so there's actually no need to use two ids in a selector and it might even internally slow down finding the correct node.
use div the place of td and your code is working.
<div id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</div>
JS
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
});
});
working fiddle here
only use one id in selector
put code after document ready, $(function(){ code here.. })
$(function(){
$("#atest").on('click',function(){
alert ("Success !!!");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<td id="tdtest">
<a id="atest">
<span id="spantest">Show</span>
</a>
</td>
I'm using datatable editor with inTableControl buttons. The inTableControl buttons work fine when the table is in normal status, but in combination with responsive and if the inTableControl buttons are in the child tr (when collapsed in the dropdown), the sample js is not working. There are no records to edit in the modal. Does anyone know how to adjust the js for the inTableControl buttons for them also to work when in the child tr? I tried a couple of things like .parent().prev('parent') , .closest('tr.child').prev('tr.parent'), .closest('tr').prev('tr') , .parent().prev('tr') .... but none of them work. And do I need an if for both status? How would that look like?
This works fine ...
var edit_inTable_editor_bafin = $('#bafin').on('click', 'a.editor_cog', function (e) {
e.preventDefault();
editor_bafin.edit( $(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
} );
} );
<tr id="row_2812" class="odd selected parent" role="row">
<td>Test</td>
<td class=" datatable-link" style="">
<a class="editor_cog" title="Edit Entity" role="button" href="">
</td>
</tr>
... but when the inTableControl buttons are in child tr (dropdown of responsive):
<tr id="row_2812" class="odd selected parent" role="row">
<tr class="child">
<td class="child" colspan="15">
<ul data-dtr-index="0">
<li data-dtr-index="11">...</li>
<li data-dtr-index="12">...</li>
<li data-dtr-index="13">...</li>
<span class="dtr-title"></span>
<span class="dtr-data">
<a class="editor_cog" title="Edit Entity" role="button" href="">Edit</a>
</span>
</li>
</ul>
</td>
</tr>
...
I have a similar problem. But I solved it this way
$('#tb_sos tbody').on( 'click', 'input.aja', function () {
var tr=$(this).parents('tr');
if ($(tr).hasClass("child")){
var api = tablaSOS.tabla.row( $(this).parents('tr').prev('tr') ).data();
}else{
var api = tablaSOS.tabla.row( $(this).parents('tr') ).data();
}
console.log(api);
} );
Summary: I have a html page which consists of two add buttons and two tables. When add button is clicked, rows are appended to respective table. In the back end i want to collect all the row elements when "button" is clicked and POST to other page.
<div class="report">
<div class="panel">
<div>
<button type="button" class="add btn btn-primary" data-toggle="tooltip" title="Add to configuration list.">
<i class="fa fa-plus"></i>
Add
</button>
</div>
<div class ="configuration-table panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Remove</th>
<th>Layer</th>
<th>Display</th>
<th>Unit</th>
<th>Dataset</th>
<th>Ordering</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class = "done">
<input class="btn btn-success" formaction="{% url 'something' %}" formmethod="post" type="submit" value="Done"></input>
</div>
</div>
and here is reports.js
var arr = [];
$('.report')
.on('click','.add', function(){
$(this)
.parents('.report')
.find('.configuration-table tbody')
.append(
'<tr>'+
'<td class="remove-row" role="button" aria-label="Remove Region"><i class="fa fa-times" title="Remove this row." data-toggle="tooltip" data-placement="right" aria-hidden="true"></i></td>'+
'<td>'+layer_text+'</td>'+
map_elements+
'<td>'+unit_text+'</td>'+
'<td>'+dataset_text+'</td>'+
'<td class="ordering" aria-label="Re-order"><i class="fa fa-arrows" title="Re-arrange row order." data-toggle="tooltip" data-placement="right"></i></td>'+
'</tr>'
)
.on('click','.remove-row',function() {
$(this).parents('tr').remove();
})
.sortable({
helper: script
})
.disableSelection();
.on('submit','.done form',function(){
//do domething to collect columns
$('.configuration-table tbody').each(function(){
arr.push({
column.name: column.value
});
});
})
Here as you can see that table rows can be removed/sortable. Dont worry about POST method now. I just need the logic to collect columns from the table after done button is clicked.
Assume script is correct in terms of class names and traversal-filters. I just need the logic to collect column elements and push to "arr".
Thanks in advance
Firstly, you need to loop over the th elements within the thead to get the column names, then the tr in the tbody to get the values. You can get the text() properties from each respective td to fill object. Try this:
.on('submit','.done form',function() {
var arr = [];
var $table = $('.configuration-table');
var columnNames = $table.find('thead th').map(function() {
return $(this).text();
});
$table.find('tbody tr').each(function(){
var rowValues = {};
$(this).find('td').each(function(i) {
rowValues[columnNames[i]] = $(this).text();
});
arr.push(rowValues);
});
});
Example fiddle