I'm using QuickSearchJS and it is working as expected until ajax call is made and then it doesn't work. I have tried 2 ways. Is there a way to use it with document.on function or any alternate way?
1st way
$(function () {
var qs = $('input#filterText').quicksearch('#a option')
});
2nd way:
$(document).ready(function() {
$(function () {
var qs = $('input#filterText').quicksearch('#a option')
});
});
According to the documentation you should use qs.cache(); after your ajax call.
var qs = $('input#id_search_list').quicksearch('ul#list_example li');
$('ul#list_example').append('<li>Loaded with Ajax</li>');
qs.cache();
var qs=$('input#search').quicksearch('table tbody td');
$("#append").on("click", function(e) {
$("tr").append('<td>'+$("#search").val()+'</td>');
qs.cache();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.2.0/jquery.quicksearch.min.js"></script>
/* Example form */
<form>
<input type="text" id="search">
<input type="button" id="append" value="ajax">
</form>
/* Example table */
<table>
<tbody>
<tr>
<td>Test cell</td>
<td>Another test cell</td>
</tr>
</tbody>
</table>
Related
I have total 15 table on my web page. I need to hide all of this when loading this page.
I am trying to do this like:
but it's not working. anyone can help me, please?
window.onload = function() {
var tableEL = $("table");
for (var i = 0; i < tableEL.length; i++) {
tableEL[i].hide();
}
};
Try this:
window.onload = function() {
$("table").hide();
};
It will hide all table presented on the page.
You are missing $ while selecting the table inside the loop.
window.onload = function() {
var tableEL = $("table");
for (var i = 0; i < tableEL.length; i++) {
$(tableEL[i]).hide();
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
</tr>
</table>
You can also use CSS to hide the tables
table{
display:none;
}
Use jQuery.
$(function(){
$("table").hide(); // this will execute after loading the page
});
$(document).ready(function() {
$('table').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>1</td></tr></table>
<table><tr><td>2</td></tr></table>
<table><tr><td>3</td></tr></table>
<table><tr><td>4</td></tr></table>
$('table').hide(); in jQuery will have this effect. Make sure you do it after the document is fully loaded or the tables will not be loaded into the DOM and then jQuery will try to hide the tables before they exist.
$(document).load(function(){
$('table').hide();
});
I have a table tr and td. In between the table data there is a span that I want to take the ID from.
In my jquery code, it's not returning any value from span id.
How can get span id?
My HTML
<table border="1" id="t1">
<tr>
<td>
<span class="f1" id="111" onclick="subtract();">Subtract</span>
</td>
</tr>
<tr>
<td>
<span class="f2" id="222" onclick="subtract();">Subtract</span>
</td>
</tr>
</table>
My jQuery
$(document).ready(function() {
$("#t1 span").click(function() {
var a = $(this).id();
alert(a);
});
});
Use jQuery's attr method:
var a = $(this).attr('id');
This allows you to take any attribute from any jQuery object element and return its value.
More info in the jQuery attr() Docs
You can simply pass the this in your subtract function:
function subtract(element) {
var a = element.id
console.log(a);
}
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
</table>
Another solution is using jQuery .attr():
$('table#t1 span').click(function() {
var a = $(this).attr('id');
console.log(a);
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2">Subtract</span></td>
</tr>
</table>
You can use id property of Element
var a = this.id;
in jQuery, us the attr function to get attributed from HTML elements. http://api.jquery.com/attr/
See working example using your code: https://jsfiddle.net/e2vonuor/
The problem is that you're chaining a non-existent method to a jQuery's $(this) object, id is neither a function nor a method, in either jQuery or DOM: it's a property, of an HTMLElement. So, instead use a valid jQuery method to retrieve the property:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).prop('id');
alert(a);
});
});
Although you could, certainly, also use attr() in place of prop():
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).attr('id');
alert(a);
});
});
Or use the DOM:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = this.id;
alert(a);
});
});
You either use the inline "onclick" in which case you can send the actual element as a parameter:
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
jQuery
function substract(spanElement){
var id = $(spanElement).attr("id");
alert(id);
}
Or you set the click functionality in the document ready:
$(document).ready(function () {
$("#t1 span").click(function () {
var id = $(this).attr("id");
alert(a);
});
});
I also recommend you debug using console.log instead of the alert function. But this is a matter of preference.
I want to call a function for every cell in a table except the first column. Until now, I have the following code:
<script type="text/javascript">
$("#resultstable tr").each(function () {
$('td', this).each(function () {
....do my staff...
})
})
</script>
This apply the function to every cell in my table. If I change the code to this, I thought that it will work, but it doesn't.
<script type="text/javascript">
$("#resultstable tr").each(function () {
$('td :not(:first-child)', this).each(function () {
....do my staff...
})
})
</script>
Just slice the elements:
$("<selector>").slice(1).each(function () {...});
.slice( start [, end ] )
Description: Reduce the set of matched elements to a subset specified by a range of indices.
Another working solution would be to build a spaghetti selector using :not and :first:
$("tr").each(function () {
$("td:not(:first)", this).each(function () {
// do something
});
});
Example
var colors = ["#f1c40f", "#2ecc71"];
$("table tr").each(function() {
$("td", this).slice(1).each(function(i) {
$(this).css("background", colors[i])
});
});
setTimeout(function() {
$("table tr").each(function() {
$("td:not(:first)", this).each(function(i) {
$(this).css("background", colors[colors.length - i - 1])
});
});
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>19</td>
<td>Europe</td>
</tr>
<tr>
<td>Bob</td>
<td>20</td>
<td>Europe</td>
</tr>
<tr>
<td>Carol</td>
<td>15</td>
<td>Australia</td>
</tr>
</tbody>
</table>
hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?
<table border="1" id="estTable">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Chris</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Cass</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aldrin</td>
<td>16</td>
</tr>
</tbody>
</table>
<input type="button" value="Edit" id="editbtn"/>
<div id="out"></div>
and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.
$('#editbtn').click(function(){
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
This gets a little easier when you use classes to add more context to your source:
<tr>
<td class="select hidden">
<input type="checkbox">
</td>
<td class="name">Chris</td>
<td class="age">10</td>
</tr>
Then you can do something like this:
$(document).ready(function () {
'use strict';
$('#estTable tbody tr').click(function (e) {
//when the row is clicked...
var self = $(this), //cache this
checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
isChecked = checkbox.prop('checked'); //and the current state
if (!isChecked) {
//about to be checked so clear all other selections
$('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
}
checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
});
$('#editbtn').click(function (e) {
var selectedRow = $('#estTable .select :checked'),
tr = selectedRow.parents('tr'), //get the parent row
name = tr.find('.name').text(), //get the name
age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
p = $('<p />'); //create a p element
$('#out').append(p.clone().text(name + ': ' + age));
});
});
Live demo: http://jsfiddle.net/Lf9rf/
if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call
$('#editbtn').click(function(){
$('#out').empty();
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
jsBin demo
CSS:
.highlight{
background:gold;
}
jQuery:
$('#estTable tr:gt(0)').click(function( e ){
var isChecked = $(this).find(':checkbox').is(':checked');
if(e.target.tagName !== 'INPUT'){
$(this).find(':checkbox').prop('checked', !isChecked);
}
$(this).toggleClass('highlight');
});
I have the following HTML:
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
</table>
and the following jQuery :
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
});
</script>
how can i get the class name of Odd row in Jquery?
Simply
var $elems = $("table.ChatBox tr:odd"); should work.
To get their classes(heads up to Juicy Scripter below),
$elems.each(function(){ console.log(this.className); //do whatever with the class names. });
Try this:
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox").children("td:odd").attr("class");
alert (Tabletr);
}
});
</script>
You can also use :first instead of :odd if you wish to get the first td class.
jQuery itself doesn't provide direct way to retrieve DOM element class other than using attr method of jQuery or className property for element in JavaScript after you get the elements:
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
var firstElementClass = Tabletr.eq(0).attr('class');
// Previous is the same as
var firstElementClass = Tabletr.get(0).className;
// Due to fact that Tabletr may contain more that one row you may want to iterate and collect classes names.
var classes = [];
Tabletr.each(function(){
classes.push(this.className);
// OR
classes.push($(this).attr('class'));
});
});
You can simplify your selector:
var Tabletr = $(".ChatBox tr:odd")
This gives you a jQuery object for each odd row in your table. If there's just one such row, you could do this:
var Tabletr = $('.ChatBox tr:odd')[0].className; // -> "row2"
But if there are multiple rows, you need something more like this:
var TableRowClasses = $(".ChatBox tr:odd").map( function(){
return this.className;
}).get();
This gives you an array with every odd row's class as an element. So you'd end up with an array like this:
["row2","row4","row6"] // confusing odd-row classnames notwithstanding
I've look at your code and the following changes gave me the result your after.
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
<tr class="row3">
<td></td>
</tr>
<tr class="row4">
<td></td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(".ChatBox tr:odd").each(function () {
//test
alert($(this).attr("class"));
});
});
</script>