I have two JavaScript functions: one toggles (hide/show) a table row when a link is clicked, and another that filters table rows (showing only rows with text that's entered into a text field). When someone enters text into the text field, I want to be able to hide all of the shown table rows (that were toggled). So, basically, I'm trying to add part of the toggle function to the filter function. The toggle function needs to function on its own, but all items will be hidden when text is entered.
Toggle Function
If a table row has an ID (id="celltohid1" or id="celltohid1"), then the following function hides or shows that row when a link it clicked...
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'table-row')
e.style.display = 'none';
else
e.style.display = 'table-row';
}
//-->
</script>
Filter Function
Below is the Filter function...
<script>
$(document).ready(function(){
$(".search").on("keyup",function(){
var searchTerm = $(this).val().toLowerCase();
$("#DMTbl tbody tr.contentrow").each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
</script>
Goal (and my weak attempt)
I need to add functionality that hides all the rows with IDs that contain "celltohid" (if all the id's are celltohid#)... I don't know JavaScript, so below is my weak attempt at this. Every row with the unique ids "celltohid#" has a class "descexpand". So, I tried adding a toggle to change the display style for that class ... but it's not working...
<script>
$(document).ready(function(){
$(".search").on("keyup",function(){
var searchTerm = $(this).val().toLowerCase();
$("#DMTbl tbody tr.contentrow").each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
var clasname = "descexpand";
var e = document.getElementByClass(clasnam);
if(e.style.display == "table-row") {
e.style.display = "none";
}
});
});
});
</script>
Can anyone help?
You don't need <td/> id's for filtering. You can simply check the string in <tr/> and hide if there text doesn't exist.
$(document).ready(function() {
$(".search").off('keyup').on("keyup", function() {
var searchTerm = $(this).val().toLowerCase();
$("table tbody tr").each(function(index) {
var lineStr = $(this).text().toLowerCase();
if (lineStr.indexOf(searchTerm) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
<input class="search" type="text" />
Related
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 want multiple textarea(ck editor) where user can input multiple data in it , i tried various function and methods of jquery like clone() and appendTo but the problem is they are cloning the textarea but ckeditor is not working, after cloning the textarea i am unable to wrote anything in it
Please help me with it.
This is what i tried
test1
http://jsfiddle.net/FADxv/793/
test2
http://jsfiddle.net/kbqjnecx/3/
Thanks
Add an id to each new textarea and manually initialize the editor using
CKEditor.replace(id [,config])
Something like:
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
var editorId = 'editor_' + x;
$(wrapper).append('<div> <textarea id="'+editorId+'" class="ckeditor" name="ck[]"></textarea>Remove</div>'); //add input box
CKEDITOR.replace(editorId, { height: 200 });
}
});
DEMO
Check this for cloning ckeditor.
Check this fiddle : http://jsfiddle.net/manektech/47htysb5/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
</head>
<body>
<div class="row hide_mail_id_domain">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Option</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<textarea class="ckeditor" required="" name="question_option_1" ></textarea>
</td>
<td></td>
</tr>
</tbody>
</table>
Add More
</div>
</div>
<script>
var REMOVE = '';
var i=1;
$(document).ready(function () {
$('.add_more').click(function () {
var oneplus=i+1;
var tr_object = $('tbody').find('tr:first').clone();
// getting and renaming existing textarea by name.
$(tr_object).find('textarea[name="question_option_1"]').attr("name", "question_option_"+oneplus+"");
$(tr_object).find('input').val('');
$(tr_object).find('td:last').html('Remove');
$('tbody').append(tr_object);
//replace code
CKEDITOR.replace("question_option_"+oneplus+"");
// when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
// included below code
$('#cke_question_option_1').each(function() {
var $ids = $('[id=' + this.id + ']');
if ($ids.length > 1) {
$ids.not(':first').remove();
}
});
i=i+1;
oneplus++;
});
$(document).on('click', '.remove_more', function () {
var id = $(this).closest('tr').find('.id').val();
if (id != '') {
if (REMOVE != '') {
REMOVE = REMOVE + ',' + id;
} else {
REMOVE = id;
}
$('#id').val(REMOVE);
}
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
Hi i am trying to search on page table tbody, the search is should be like ctrl + F search this my html and php code:
Please refer the image and link linked below for the sources.
<table>
<thead>
<tr><td><input type="text" placeholder="Search Student id="searchStudent"> </td>
<td></td><td></td><td></td><td></td><td></td></tr>
</thead>
<tbody>
<tr>
<td>
<span><img src="<?php echo $gdScoreData['profile_pic']; ?>"/></span>
<p><?php echo $gdScoreData['student_fname'];?> <?php echo $gdScoreData['student_lname'];?></p>
<p><b>Hallticket</b> : S<?php echo $gdScoreData['student_pid']; ?>J<?php echo $jobID; ?></p>
</td>
<td></td><td></td><td></td><td></td><td></td></tr>
1st tr will close here php code is the above one in html it looks like shown in image:
<tr><td><span><img src="profile_pic/first_1479536519.jpg" width="50" /></span><p>Robert Smith</p><p><b>Hallticket</b> : S27J2</p></td></tr>
</tbody>
</table>
This my javascript code to search like ctrl + F
/* Search Student like ctrl+f start */
$("#searchStudent").on("keyup", function() {
var value = $(this).val();
console.log(value);
$("table tbody tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
/* Search Student like ctrl+f end*/
Here is the source from where i have tried:
Source JS
i have modified your js fiddle code now it working jsfiddle.net/rFGWZ/3406/
$("#search").on("keyup", function() {
var value = $(this).val();
if(value!='') {
$("table tbody tr").hide();
}else{
$("table tbody tr").show();
}
$('table tbody tr td:contains("'+value+'")').parent('tr').show();
});
Basically your code is working but it is not picking up elements inside your tag
try adding the following:
var id2 = $row.find("b:first").text();
and changing this:
if (id2.indexOf(value) !== 0) {
Then search based on the bold content and it should work
You could try it like this and search on each part individually:
$id = $row.find("td:first");
var id2 = $id.find("b:first").text();
var id3 = $id.find("p:first").text();
if (id2.indexOf(value) !== 0 && id3.indexOf(value) !== 0) {
$("#searchStudent").on("keyup", function() {
var value = $(this).val();
if(value!='') {
$("table tbody tr").hide();
}else{
$("table tbody tr").show();
}
$('table tbody tr td:contains("'+value+'")').parent('tr').show();
});
I have resolved with this help.
I don't understand why the check() function doesn't want to fire, I know that if I set this function to setInterval(check, 1000) or to function $("#btn-click") it will work but why it doesn't work now? I would appreciate if you explain me
$(function() {
$("#field").on("keyup", function() {
var x = $(this).val();
$("#outcome").text(x);
});
$("#btn-save").click(function() {
var name = $("#outcome").text();
var x = $("table tbody").append("<tr><td>" + name + "</td></tr>")
$("#field").val("");
$("#outcome").text("");
});
check();
function check() {
if ($("table tbody").has("tr")) {
$("table tbody tr td").on("click", function(e) {
var tar = $(e.target);
var b = $(this);
if (tar.is(b)) {
b.css("color", "red");
}
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type='text' id='field'>
<p>The result is: <span id="outcome"></span></p>
<span id="btn-save" class="btn-save">save</span>
<table>
<thead>
<tr>
<th>Names</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
The function fires, but there's no td element to attach events to.
If you want to bind events to elements that will be dynamically generated, you do not need a check function, just use $(body').on(evtType,selector,handler)
Check below for an example. every td you'll add dynamically will still be bound to the event listener, because it's attached to 'body'.
$(function() {
$("#field").on("keyup", function() {
var x = $(this).val();
$("#outcome").text(x);
});
$("#btn-save").click(function() {
var name = $("#outcome").text();
var x = $("table tbody").append("<tr><td>" + name + "</td></tr>")
$("#field").val("");
$("#outcome").text("");
});
check();
function check() {
console.log('firing')
}
$('body').on('click', 'table tbody tr td', function(e) {
var tar = $(e.target);
var b = $(this);
if (tar.is(b)) {
b.css("color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type='text' id='field'>
<p>The result is: <span id="outcome"></span>
</p>
<span id="btn-save" class="btn-save">save</span>
<table>
<thead>
<tr>
<th>Names</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
check() is firing. It's just not doing anything because of your if logic, which had bad selectors pointing to elements (tbody, td) that you don't have.
You won't get a td element in your table until AFTER you click btn-save because that click event handler creates the td elements. Your code wants to run check before that button gets clicked.
I've removed the reference to tbody and changed your td reference to th and now it works:
$(function() {
$("#field").on("keyup", function() {
var x = $(this).val();
$("#outcome").text(x);
});
$("#btn-save").click(function() {
var name = $("#outcome").text();
var x = $("table tbody").append("<tr><td>" +name+"</td></tr>")
$("#field").val("");
$("#outcome").text("");
});
check();
function check() {
console.log("HELLO FROM CHECK!");
if ($("table").has("tr")) {
$("table tr th").on("click", function(e) {
var tar = $(e.target);
var b = $(this);
if (tar.is(b)) {
b.css("color", "red");
}
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='field'>
<p>The result is: <span id="outcome"></span></p>
<span id="btn-save" class="btn-save">save</span>
<table>
<thead>
<tr>
<th>Names</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<body>
<input type="text" id="search"/>
<table id="boxdata">
<tr>
<td class="namebox1">jQuery</td>
</tr>
<tr>
<td class="namebox2">javascript</td>
</tr>
<tr>
<td class="namebox3">php</td>
</tr>
<tr>
<td class="namebox4">sql</td>
</tr>
<tr>
<td class="namebox5">XML</td>
</tr>
<tr>
<td class="namebox6">ASP</td>
</tr>
</table>
</body>
<script>
$(document).ready(function(){
$('#search').keyup(function(){
searchBox($(this).val());
});
});
function searchBox(inputVal) {
$('#boxdata').find('tr').each(function(index, row){
var names = $(row).find('td');
var found = false;
if(names.length > 0) {
names.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()) & inputVal != ''){
found = true;
return false;
}
});
if(found == true)
$(row).addClass("red");
else
$(row).removeClass("red");
}
});
}
</script>
there's a textfield for searching words and there are 6 words in the each 6 boxes below textfield.(I omitted css codes. but, it wouldnt matter to solve the problem.). if i type a letter 's' then the words that including letter 's' like 'javascript', 'sql', 'ASP' these font-color will be changed black to red. And i made it by using table elements in html but i'd like to change all elements into div style to put some data fluidly later. i have difficulty to fix especially jquery. how can i fix it?
You can simplify this a little bit.
function searchBox(inputVal) {
var regExp = new RegExp(inputVal, 'i');
$('#boxdata').find('tr').removeClass('red').filter(function() {
return $(this).find('td').filter(function() {
return regExp.test( $(this).text() );
}).length && $.trim(inputVal).length;
}).addClass('red');
}
So remove the red class from all <tr>'s first, then filter them, test the text of each <td>, if it matches, return the <tr> and then add the class red again.
Here's a fiddle
As for changing from a table to div, the jQuery would depend on how you structure your markup, but the principle would remain the same.
Here's another fiddle
You can make javascript code HTML agnostic by using css classes instead of element names. Demo.
function searchBox(inputVal) {
var regExp = new RegExp(inputVal = $.trim(inputVal), 'i'),
highlight = 'red';
$('#wrapper').find('.word') //instead of tr/td/div
.removeClass(highlight)
.each(function(){
var $this = $(this);
inputVal && regExp.test($this.text()) &&
$this.addClass(highlight);
});
}