Develop Reference

Toggle and Filter JavaScript function - combine

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" />

Filtering table row by select option

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>

Table with jQuery appendTo

I want to create table with these span and a href's. There must be just one tr and 3 td.
updater: function (selectedCustomer) {
valueAccessor()( parseInt(selectedCustomer.split('-')[0]));
if (valueAccessor()() > 0) {
$(element).hide();
var txt = $('<span>' + selectedCustomer + '</span>').appendTo($(element).parent());
var openCust = $('<i class="icon-search" style="font-size: 14pt; color: #000000;"></i>').appendTo($(element).parent());
var btn = $('<i class="icon-remove" style="font-size: 14pt; color: #000000;"></i>').appendTo($(element).parent());
btn.on("click", function () {
$(element).show();
txt.remove();
btn.remove();
openCust.remove();
valueAccessor()(0);
})
openCust.on("click", function () {
OpenCustomer(valueAccessor()());
})
}
// OpenCustomer(selectedCustomer);
}
});
I want to see my html like;
<table>
<tr>
<td><span>abc554444</span></td>
<td><a href>dsadasda</a> </td>
<td><a href>dsadasda</a> </td>
</tr>
</table>
How can I add table, tr, td tags to my code?
Thank you,

I tried to make it as simple example so that you can see how I first instantiate new elements, then manipulate, text, link etc.. and finaly I append it with jQuery ..
var ah = $('<a/>')
var sp = $('<span/>')
var td = $('<td/>')
var tr = $('<tr/>')
tr.append( td.clone().append( ah ).attr('href', '#').text('Link text') )
tr.append( td.clone().append( sp ).text('Lorem Ipsum') )
tr.append( td.clone().append( sp ).text('New Lorem Ipsum') )
var tb = $('<table/>').append(tr)
// append to body or some other element :)
$('body').append( tb )
http://codepen.io/mkdizajn/pen/BQgEWQ?editors=0110
hth, k

How I like to do it: create the different components ie span, a with hrefs etc. then append to
<table id="theTable">
<tr></tr>
</table>
var mySpan = "<span>What i want in it</span>";
var firstLink = "<a href='"+what ever i want here+"'>The other bits in here</a>";
var secondLink = "<a href='foo'>All the other stuff</a>";
$("body").on("click", ".myButton", function(){
$("#myTable tr").empty();
$("#theTable tr").append("<td>"+mySPan+"</td><td>"+firstLink+"</td><td>"+secondLink+"</td>");
});
The simple way usually works.

jQuery table loop?

I'm trying to run through a table and change each cell based on the row. Table example:
<table id='myTable'>
<tr>
<td><div id='A1'></div></td>
<td><div id='A2'></div></td>
</tr>
<tr>
<td><div id='A1'></div></td>
<td><div id='A2'></div></td>
</tr>
</table>
Function example (in script under body):
function myFunction(){
var table = $('#myTable');
var rows = table.find('tr');
rows.each(function(i, r){
var cells = r.find('td');
if(i==1){//to edit second row, for example
cells.each(function(j,c){
var square = c.getChild();//attempt to get the div in the td
square.innerHTML='html here';
});
}
});
}
$(document).load(myFunction);
The example shown is non-specific version of the actual function I'm trying to run.
To be clear, I have linked to the jQuery 2.1 CDN, so the page should be able to read jQuery.
Console shows no errors, but still does not run appear to run the function. Checking the tested row in the console shows no change to the html in the div. Any advice for this?

When I run it I get an error on r.find() because .find() is a jQuery function and needs to be called on a jQuery object, which r is not. Simply wrapping it in a $() works.
function myFunction(){
var table = $('#myTable');
var rows = table.find('tr');
rows.each(function(i, r){
var cells = $(r).find('td');
if(i==1){//to edit second row, for example
cells.each(function(j,c){
var square = c.getChild();//attempt to get the div in the td
square.innerHTML='html here';
});
}
});
}
https://jsfiddle.net/k50o8eha/1/
You may need to do asomething similar to the c.getChild();

Here's a simplified version :
$("#myTable tr").each(function(i, r){
if(i==1)
{
$(this).find('td').each(function()
{
$(this).find("div").html("html here");
});
}
});
Example : https://jsfiddle.net/DinoMyte/4dyph8jh/11/

Can you give this a try...
$( document ).ready(function() {
var table = $('#myTable');
var rows = table.find('tr');
rows.each(function(i, r){
var cells = r.find('td');
if(i==1){//to edit second row, for example
cells.each(function(j,c){
var square = c.getChild();//attempt to get the div in the td
square.innerHTML='html here';
});
}
});
});
or shorthand...
$(function() {
});

$( document ).ready(function() {
var table = $('#myTable');
var rows = table.find('tr');
rows.each(function(i, r){
var cells = $(r).find('td');
if(i==1){//to edit second row, for example
cells.each(function(j,c){
var square = $(c).children('div');
square.text('html here');
});
}
});
});
table{
background-color: #eee;
width: 300px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
<tr>
<td><div id='A1'></div></td>
<td><div id='A2'></div></td>
</tr>
<tr>
<td><div id='A1'></div></td>
<td><div id='A2'></div></td>
</tr>
</table>

This works, you can try this
JSBIN
function myFunction(){
var table = $('#myTable');
var rows = table.find('tr');
rows.each(function(i){
if(i==1){//to edit second row, for example
$(this).find('td').each(function(j){
$(this).find('div').html('html here');
});
}
});
}
$(document).ready(myFunction);

first the "id" should be unique to an element... but ok, this should do the trick:
$(document).ready(function(){
$("#myTable>tr:odd").children("div").text('html here');
});
If you want to put html code in the div, change text for html. if you want to specify the row then:
$(document).ready(function(){
myRow = //set its value...
$("#myTable>tr").each(function(idx, element){
if(idx == myRow){
element.children("div").text('html here');
}
}, myRow);
});

Referencing the top row of a table

I would like the following script to move a table row to the top of a table. I can't figure out how to reference the id of the first row, however, since the ID is set dynamically, I tried row.insertAfter(row.first()); but it's making the row disappear instead of moving it. Any ideas how to reference the top row?
$(".top").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".top")) {
row.inserAfter(row.first());
} else {
return false;
}
});
<tbody id="sortable">
<tr id="row1">
<td>Top</td>
</tr>
<tr id="row2">
<td>Top</td>
</tr>
<tr id="row3">
<td>Top</td>
</tr>
</tbody>

This works...
$(".top").click(function() {
var thisRow = $(this).parent().parent();
var firstRow = thisRow.parent().find("tr:first").not(thisRow);
thisRow.insertBefore(firstRow);
});

$(".top").click(function(){
var tr=this.parentNode.parentNode;
tr.parentNode.insertBefore(tr.parentNode.firstChild,tr);
tr.parentNode.removeChild(tr);
}

Do you wanna do something like this?
$(".top").click(function(){
var $this = $(this); // make a reference to the current element
$.ajax({
url: 'your/ajax/url.php',
success: function(data) {
// do what you want with data,
// and then move the row on top
// of the table, like so
var row = $this.parents("tr");
var first_row = row.parent().find('tr:first');
if (row && first_row && row != first_row) {
row.insertBefore(first_row);
}
}
});
return false; // stay on the page
});
Check http://api.jquery.com/jQuery.ajax/ for more info

var row = $(this).find("tr").eq(0);