I am trying to select a class which is from the same table (and row).
If the user clicks on "Remove", I need to grab the text from "form_delete_id".
Unfortunately I get an empty string back. I tried "closest()" and "parent()" without luck.
This is my code:
<table class="responsive-table bordered striped">
<thead>
<tr>
<th>id</th>
<th>page</th>
<th>parameter</th>
<th>method</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form_delete_id">2</td>
<td class="form_delete_page">dqfsq</td>
<td class="form_delete_parameter">qsdfqs</td>
<td class="form_delete_method">post</td>
<td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
</tr>
</tbody>
</table>
And the Javascript below it:
<script>
$(".form_delete_trigger").click(function() {
alert($(this).closest(".form_delete_id").text());
});
</script>
My code can also be found on JSFIDDLE
.form_delete_id is sibling element of clicked .form_delete_id .You need to use .siblings() instead of .closest():
$(function(){
$(".form_delete_trigger").click(function() {
alert($(this).siblings(".form_delete_id").text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="responsive-table bordered striped">
<thead>
<tr>
<th>id</th>
<th>page</th>
<th>parameter</th>
<th>method</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form_delete_id">2</td>
<td class="form_delete_page">dqfsq</td>
<td class="form_delete_parameter">qsdfqs</td>
<td class="form_delete_method">post</td>
<td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
</tr>
</tbody>
</table>
Try getting the parent and searching it for the delete id:
<script>
$(".form_delete_trigger").click(function() {
alert($(this).parent().find(".form_delete_id").text());
});
</script>
or using sibiling
<script>
$(".form_delete_trigger").click(function() {
alert($(this).siblings(".form_delete_id").text());
});
</script>
https://jsfiddle.net/t8okf8kc/
Related
I'm trying the row to be deleted when I click the delete icon in the table using bootstrap table.
My table:
<table id="checkDataTable">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müsteri</th>
<th data-field="ReceiverCompanyName">Alici Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">Islem</th>
</tr>
</thead>
</table>
Javascript:
function StatuFormatter(value, row, index) {
return "<a onclick='removeAssetEconomyCheckBillOfLadingRow()'><i class='fa fa-trash fa-2x' aria-hidden='true'></i></a>";
}
function removeAssetEconomyCheckBillOfLadingRow(id) {
alert(id);
}
It's fine until the removeAssetEconomyCheckBillOfLadingRow function.
How can I delete inside this function?
Please try below:
$(document).on('click', 'button.deleteRow', function(event) {
$(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="checkDataTable" class="table">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müşteri</th>
<th data-field="ReceiverCompanyName">Alıcı Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">İşlem</th>
</tr>
</thead>
<tobdy>
<tr>
<td>Data1</td>
<td>Data1</td>
<td>Data1</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data2</td>
<td>Data2</td>
<td>Data2</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data3</td>
<td>Data3</td>
<td>Data3</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
</tobdy>
</table>
First of all, you need to set id to to identify the deleting row.
<tr id="1"></tr>
And get tr and remove
function removeAssetEconomyCheckBillOfLadingRow(id) {
$('#checkDataTable').row($('#{{id}}'))).remove().draw();
}
I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">
Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>
you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>
here i want to remove a specific class from a <td><td> inside table and i have a another table in which i have a button and by clicking on this button i want to remove class of <td><td> which is in different table.
My HTML is As Like
<table id="test">
<tr>
<td class="background"></td>
<td></td>
<td class="background"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="background"></td>
<td class="background"></td>
<td class="background"></td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
Jquery Code am trying is
$("#Close").click(function () {
$('#test', 'tr','td').removeClass("background");
});
Try this:
$("#Close").click(function () {
$('#test td').removeClass("background");
});
$('#test td').removeClass('background');
Maybe this will help:
document.getElementById('tdid').className = '';
$("#Close").click(function() {
$('.background').removeClass("background");
});
.background {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr>
<td class="background">1</td>
<td>1</td>
<td class="background">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td class="background">1</td>
<td class="background">1</td>
<td class="background">1</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
If you want to remove all then select the class then remove that class.
I'm trying to toggle divs such that only one div is only open at one time. I have looked at the other solutions provided, however the solutions provided are such that if I clicked on the open div again, it does not close. And I am looking for the currently opened div to close again when clicked. Any help given is appreciated. Thanks in advance.
JSFIDDLE:http://jsfiddle.net/ZmDs2/78/
HTML
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td class="title">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr class="description">
<td>hello </td>
</tr>
<tr class="list">
<td class="title">Pizza</td>
<td>Roberta's</td>
<td>Knife</td>
</tr>
<tr class="description">
<td>bye </td>
</tr>
<tr class="list">
<td>Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr class="list">
<td>Chicken & Waffles</td>
<td>cell is row 3, column 1</td>
<td>Spoon</td>
</tr>
</tbody>
</table>
CSS
.description{
display:none;
}
JS:
$('.title').on('click', function() {
var $this = $(this),
$next = $this.next();
// Check if another profile is open and close it
var $last = $('.description:visible', $this.parents('table'));
if ($last.length) {
$last.slideUp('fast');
}
// Show the new profile content only if we are opening a new profile
if ($last.parents('.list').index() !== $this.parent().index()) {
$next.slideDown('fast');
}
});
Just a heads-up to avoid "reinventing the wheel" unless necessary. The bootstrap library has a Collapse element which does what you require.
Check it out and see if it fits the bill.
Created a collapse element from the Twitter Bootstrap library.
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td data-toggle="collapse" data-target="#cupcakes" class="accordion-toggle">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="cupcakes">hello</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pizza" class="accordion-toggle">Pizza</td>
<td class="from">Roberta's</td>
<td>Knife</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pizza">bye</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pasta" class="accordion-toggle">Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pasta">hi</div></tr>
</tr>
</tbody>
</table>
I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?
Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');
ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!
try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
DEMO