I have a table with some rows. in this table i have Add button to append rows when clicked. my question is how can i load ajax seconpage in class = loadi in rows when Add clicked?
i wrote some codes but the codes is not working to load second page in div with class loadi. here is my Snippet:
$(document).ready(function() {
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
});
$(".loadi").load("secondpage.html");
})
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>
You need to call load() within the click handler on the content that you just appended. Your current logic doesn't work as you call load() before the element exists, therefore nothing happens. Try this:
$(".add").click(function() {
var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
$tr.find(".loadi").load("secondpage.html");
});
$(".add").click(function() {
var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
//$tr.find(".loadi").load("secondpage.html"); // AJAX...
$tr.find(".loadi").text("load AJAX content here...");
});
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>
You have to put the .load() inside the click handler:
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
$(".loadi").load("secondpage.html");
});
The issue was you called the .load() before click at document ready. If there will be more added rows. Then you might use .last() to get the last .loadi div:
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
$(".loadi").last().load("secondpage.html");
});
$(document).ready(function() {
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
// window.open("secondpage.html", '_blank');
$(".loadi").load("secondpage.html");
});
})
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>
Related
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>
I've a table with rows that I can toggle. Now I wanna search in the table. My search function work's but does not display the hidden rows. How can I do this? Here my search function.
$(document).ready(function(){
$("#search").keyup(function(){
var search = $(this).val();
$("table tbody tr").hide();
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:contains("+search+")").each(function(){
$(this).closest("tr").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="skills" id="skills" width="100%" cellspacing="0">
<tr class="header-1">
<th>Skill</th>
<th colspan="2">Theoretische Kenntnisse</th>
<th>Praktische Kenntnisse</th>
<th class="skills_pfl">Zuletzt gepfelgt</th>
</tr>
<tr class="header-2">
<th></th>
<th class="skills_ausb">Ausgebildet</th>
<th class="skills_ausb_jhr">Ausbildungsjahr</th>
<th></th>
<th></th>
</tr>
<tr id="74" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-74').toggle(300); $('#fa-74').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-74"></i> Anwendungsgebiete
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody id="body-74" class="table-body"></tbody>
<tr id="116" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-116').toggle(300); $('#fa-116').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-116"></i> Application Server
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Some peoples don't understandt me. The search logic works fine, but I've rows that I can toggle with a click. And these rows won't be display if i search the table. Here a screenshot.
Why don't you turn your logic around and hide only the ones you don't want to see? Like so:
$(document).ready(function() {
var consolidatedArray = $("table tbody tr td").slice();
$("#search").keyup(function() {
var search = $(this).val();
$("table tbody tr").show()
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:not(:contains(" + search + "))").each(function() {
$(this).closest("tr").hide();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>abc</td>
</tr>
<tr>
<td>efg</td>
</tr>
<tr>
<td>xsd</td>
</tr>
<tr>
<td>sdf</td>
</tr>
<tr>
<td>ffs</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tbody>
</table>
<input id="search" type="text"/>
I have a button, when I click it the tables td's must be empty, on second click they must be filled again.
Problem is, when I use .empty() it leaves the table empty and I can't restore the values.
.hide() and .show() only works with html elements, they cant hide/show content.
.html() and .text() selects the content but I can't find the way to toggle them.
jQuery code:
$('#totalsTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = totalsTable.row(tr);
if (row.child.isShown()) {
$('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().show();
} else {
$('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().hide();
}
});
HTML
<table id="totalsTable" class="table table-bordered small table-hover" width="100%">
<thead>
<tr>
<th></th>
<th>#{label['regress.totals']}</th>
<th>#{label['regress.description']}</th>
<th>#{label['regress.totals.debt']}</th>
<th>#{label['regress.totals.paid']}</th>
<th>#{label['regress.totals.debt']}<i class="fa fa-plus text-success" />#{label['regress.totals.overpay']}<i class="fa fa-minus text-danger" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>#{label['regress.totals.main-total']}</td>
<td>Kelių žodžių komentaras</td>
<td>3478 Eur</td>
<td>478 Eur</td>
<td class="text-success">3000 Eur</td>
</tr>
<tr class="active">
<td class="details-control"></td>
<th>#{label['regress.totals.extra-totals']}</th>
<td>Kelių žodžių komentaras</td>
<td>3478 Eur</td>
<td>4000 Eur</td>
<td class="text-danger">-522 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Už žalų administravimą
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Bylinėjimo išlaidos
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Bylinėjimo išlaidos
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th colspan="2" style="text-align:right">#{label['regress.total-sum']}</th>
<th>6956 Eur</th>
<th>4478 Eur</th>
<th class="text-success">2478 Eur</th>
</tr>
</tfoot>
</table>
Once you use .empty(), it deletes the content (by emptying it). The contents cannot be restored because it's been deleted.
You can get around this by adding an inner element and show / hide that, eg:
<table>
<tr>
<td><div>content</div></td>
then
$("table td:nth-child(0) > div,table td:nth-child(6) > div").hide();
or, you can store the existing value before removing it, eg:
$("table td:nth-child(0)").each(function() {
$(this).data($(this).html());
$(this).html("");
});
then, to restore:
$("table td:nth-child(0)").each(function() {
$(this).html($(this).data("store"));
});
Note, you need to use .each as each element's value in the selector needs to store its own value.
Do something like this
// Selecting all elements
$el = $('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)');
if (row.child.isShown()) {
$el.each(function () {
// Setting HTML from data-val
$(this).html($(this).data("val"));
});
} else {
$el.each(function () {
// Setting data-val equals to html which can be used later and emptying the html
$(this).data("val", $(this).html());
$(this).html("");
});
}
I see others have now answered with what are most probably better solutions, but here is a fiddle I made in case it helps: https://jsfiddle.net/w81qtgp2/
$('table').click(function () {
$(this).children().each(function () {
if ($(this).html() === '<td> </td>') {
$(this).html($(this).data('text'));
} else {
var tdText = ($(this).html());
$(this).data('text', tdText);
$(this).html('<td> </td>');
}
});
});
I want when i click on the +add more button it should add the element same as in line no.1 also the S.No should incremented...and each row have remove option.
code in JSFIDDLE
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input id="1a" type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>
Jquery clone() is for cloning DOM element and then you can append it. Consider code something like this:
$(function(){
$("#c").click(function(e){
e.preventDefault();
$("table.table tbody tr:first").clone().appendTo("table.table tbody");
});
})
DEMO
For increment of serial number:
$(function(){
var counter = 1;
$("#c").click(function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
tr.find("td:eq(0)").text(++counter);
});
})
See it in action
You can use .clone() to copy your first tr:
$(".text-right").on("click", function() {
var tr = $("table tr:eq(1)").clone(true);
$(tr).find("td:first").text($("table tr").length - 1);
$("table").append(tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>
I remove id from input cause id must be unique. Also modify a bit the code to increase the numeric value of the td correct.
try:
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
</td>
</tr>
</tbody>
</table>
js:
function updateNumber() {
x = 0
$('table.table tbody tr').each(function(i,v){
$(this).find('td:eq(0)').text(x+1)
x++;
});
}
$("#c").on('click',function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
updateNumber();
console.log($('table.table tbody tr'));
});
$('body').on("click",".rm", function(e) {
e.preventDefault();
$(this).parents('tr').remove();
updateNumber();
});
jsfiddle:https://jsfiddle.net/pjeruccb/3/
Have a look at this:
$(".text-right").on("click", function() {
var prevNo = parseInt($(".table tr:last td:first-child").text());
var tr = $("table tr:eq(1)").clone(true);
$("table").append(tr);
$('.table tr:last-child td:first-child').html(prevNo + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
</tr>
</tbody>
</table>
I'm trying to a add a class to every element that contains an <a> with a text so I could hide the <tr>'s that has no text! here is my HTML code and JavaScript:
$("tr a").each(function () {
var a= $(e);
if ($e.text().length > 0) {
tr.addClass("buttoneffect");
}
});
table tr {
height: 36px;
}
table tr:hover {
background-color: #BEDB7F;
}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>Test 1</td>
</tr>
<tr>
<td>Test 2</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Test 4</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Test 6</td>
</tr>
</tbody>
</table>
see this fiddle
first you are referencing e , which you didn't pass inside the event callback, and there is no tr directly accessible you have to find out the closest tr to that of a
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});
Also if you want the trs to be hidden, you can add css for that: fiddle
tr:not(.buttoneffect)
{
display:none;
}
$("tr a").each(function() {
var a = $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});
table tr {
height: 36px;
}
table tr:hover {
background-color: #BEDB7F;
}
.buttoneffect {
background: red;
}
tr:not(.buttoneffect) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>Test 1
</td>
</tr>
<tr>
<td>Test 2
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Test 4
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Test 6
</td>
</tr>
</tbody>
</table>
You can use .filter() find filter those elements and then call .addClass() on the filtered set to add the class
$("tr").filter(function () {
return $(this).find('a').text().trim().length > 0
}).addClass("buttoneffect");
Demo: Fiddle
use jquery parent().
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.parnt('tr').addClass("buttoneffect");
}
});
Try this Demo Here
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});