Develop Reference

Sorting an HTML Table using one input field and one Select - Javascript

This script works for sorting an HTML Table using two standard input fields, but I am trying to use a select as the second input field and I cant seem to find a way to call the function onchange for the select specialtyid id to work as an input. Please help.
Thank you very much!
Here is the code:
<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<input type="text" id="infoid" placeholder="Contractor Name">
<select id="specialtyid" onChange=" ">
<option value="">Select Contractor Type:</option>
<option value="Electrician">Electrician</option>
<option value="HVAC">HVAC</option>
<option value="Plumber">Plumber</option>
</select>
<p></p>
<table id="table">
<tr>
<td>Jack Doe</td>
<td>HVAC</td>
</tr>
<tr>
<td>Jack Doe JR</td>
<td>Plumber</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Electrician</td>
</tr>
<tr>
<td>Rick Pro</td>
<td>Plumber</td>
</tr>
</table>
$(window).load(function() {
var $rows = $('#table tr'),
info,
specialty;
$('input').keyup(function() {
infovalue = $('#infoid').val().toLowerCase(),
specialtyvalue = $('#specialtyid').val().toLowerCase();
$rows.each(function(index, tr) {
info = $(tr).find('td:nth-of-type(1)').text().toLowerCase(),
specialty = $(tr).find('td:nth-of-type(2)').text().toLowerCase();
if ((info.indexOf(infovalue) != -1) && (specialty.indexOf(specialtyvalue) != -1)) {
$(this).show();
} else {
$(this).hide();
}
});
if ((searchVal1 === '') && (searchVal2 === '')) {
$rows.show();
}
});
});

Here is few things to change:
Change the selctor #table for table
Change the condition to fit with your variables (infovalue === '') && (specialtyvalue === '')
Create a function to attach on both events
Add the event $('#specialtyid').change(filterTable);
$(window).load(function() {
var $rows = $('table tr'),
info,
specialty;
function filterTable(){
infovalue = $('#infoid').val().toLowerCase(),
specialtyvalue = $('#specialtyid').val().toLowerCase();
$rows.each(function(index, tr) {
info = $(tr).find('td:nth-of-type(1)').text().toLowerCase(),
specialty = $(tr).find('td:nth-of-type(2)').text().toLowerCase();
if ((info.indexOf(infovalue) != -1) && (specialty.indexOf(specialtyvalue) != -1)) {
$(this).show();
} else {
$(this).hide();
}
});
if ((infovalue === '') && (specialtyvalue === '')) {
$rows.show();
}
}
$('input').keyup(filterTable);
$('#specialtyid').change(filterTable);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<input type="text" id="infoid" placeholder="Contractor Name">
<select id="specialtyid" onChange=" ">
<option value="">Select Contractor Type:</option>
<option value="Electrician">Electrician</option>
<option value="HVAC">HVAC</option>
<option value="Plumber">Plumber</option>
</select>
<p></p>
<table>
<tr>
<td>Jack Doe</td>
<td>HVAC</td>
</tr>
<tr>
<td>Jack Doe JR</td>
<td>Plumber</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Electrician</td>
</tr>
<tr>
<td>Rick Pro</td>
<td>Plumber</td>
</tr>
</table>

Showing and Hiding Table Rows Based Off Alphabet Buttons

I have a table with a lot of rows in it, and I want to give users the ability to click an 'A' button and all the results that start with 'A' are displayed. They could do the same for every letter. This is what I've come up with so far:
HTML
<input type="button" id="aSort" value="A" onclick="alphaSort(this.value);">
<table>
<thead>
<tr>
<td>Title</td>
<td>Description</td>
<td>Active</td>
</tr>
</thead>
<tbody>
<tr>
<td name="title">Apple</td>
<td>It's a fruit</td>
<td>Active</td>
</tr>
<tr>
<td name="title">Pear</td>
<td>It's also fruit</td>
<td>No</td>
</tr>
</tbody>
</table>
JS
function alphaSort(val) {
//pseudocode
var $rows = $('td[name=title]');
$rows.forEach(function(e) {
if(e.innerText == val + '%') {
e.closest('tr').show();
} else {
e.closest('tr').hide();
}
}
}
So with what I have here, the idea is if the user clicked the button only the Apple row would show. Ideally the function would be case insensitive. Could someone help me with how to properly iterate through all the table rows efficiently and compare the value stored in the title row?

you can use startsWith function : https://www.w3schools.com/jsref/jsref_startswith.asp
like this :
$("#aSort").click(function(){
var $rows = $('td[name=title]');
var val = $(this).val()
$rows.each(function() {
if($(this).text().startsWith(val)) {
$(this).closest('tr').show();
} else {
$(this).closest('tr').hide();
}
})
})
https://jsfiddle.net/xpvt214o/899140/

How to hide, show and re-hide and re-show tr in table in HTML

Supposedly, I have on select option. The table should only displays a row in a table based on my option in select tag.
Let say I choose the first option, and its value is A, other rows which don't contains "A" (only) will be hidden. But when it comes to option BB, supposedly the table only displays the row which only contains text "BB", the third row is successfully hidden, but then the first row is still there.
$(document).ready(function() {
$("button").click(function() {
var searchString = $('#enter').find(":selected").text();
$("#mytable tr td:contains('" + searchString + "')").each(function() {
if ($(this).text() != searchString) {
$(this).parent().hide();
} else {
$(this).parent().show();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="enter">
<option value="A">A</option>
<option value="BB">BB</option>
<option value="CCC">CCC</option>
</select>
<button>Set text content for all p elements</button>
<table border="0" align="center" width="45%" cellpadding="2" cellspacing="2" id="mytable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>
Is my jQuery correct or it does have a logical error?

For this to work you need to perform an exact match on the contents of the td elements. :contains by default is a greedy match, so searching for A will match all three rows. To fix this you can use filter():
$("button").click(function() {
var searchString = $('#enter').val();
$("#mytable tr").hide().find('td').filter(function() {
return $(this).text().trim() === searchString;
}).parent().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="enter">
<option value="A">A</option>
<option value="BB">BB</option>
<option value="CCC">CCC</option>
</select>
<button>Set text content for all p elements</button>
<table border="0" align="center" width="45%" cellpadding="2" cellspacing="2" id="mytable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>

Your code doesn't account for when a row has been hidden, but then one of the table-cells' siblings do not contain the string. For instance, the each function reaches CC, which doesn't contain BB, and then the parent is shown again.
I've amended your code, hopefully this helps.
$(document).ready(function() {
$("button").click(function() {
var searchString = $('#enter').find(":selected").text();
$("#mytable tr td").each(function() {
if ($(this).text().indexOf() > -1 || $(this).siblings().text().indexOf(searchString) > -1 ) {
$(this).parent().hide();
} else {
$(this).parent().show();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="enter">
<option value="A">A</option>
<option value="BB">BB</option>
<option value="CCC">CCC</option>
</select>
<button>Set text content for all p elements</button>
<table border="0" align="center" width="45%" cellpadding="2" cellspacing="2" id="mytable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</table>

You have to change small thing in your code..
Make your logic like :
1) First Hide all <tr>
2) Then search for the string in <tr> and show them ..
Example in your code :
$(document).ready(function() {
$("button").click(function() {
var searchString = $('#enter').find(":selected").text();
$('tr').hide(); //<------First Update
$("#mytable tr td:contains('" + searchString + "')").each(function() {
$(this).parent().show(); //<------Second update
});
});
});
I do the complete coding also . You can check it..
JSFiddle link : https://jsfiddle.net/cebL4jpv/5/

your selector "#mytable tr td:contains('" + searchString + "')" starts the loop right
after it find the element. which was causing the issue . try below
` $(document).ready(function() {
$("button").click(function() {
var searchString = $('#enter').find(":selected").text();
var trs = $('#mytable').find('tr');
trs.each(function(i, ele) {
$(ele).children('td').each(function(j, ele1) {
if ($(ele1).text() != searchString) {
$(ele1).parent().hide();
} else {
$(ele1).parent().show();
return false;
}
})
})
});
});`

Show all hidden table rows when selecting empty option in select box

So far my code works fine but when I select empty select option, all the rows in my table should be visible (in other words reset the table to initial state) again. How do I do it?
I've seen this (JQuery Selector for table with hidden row - alternate row colouring) but couldn't apply to my structure.
Thanks
JQUERY:
$(document).ready(function()
{
$("#cars").change(function()
{
var selected = $(this).val();
if (selected != '')
{
var values = $.map($('#cars>option'), function(e) { return e.value; });
values.forEach(function(item)
{
if (item != '')
{
if (selected == item)
{
$('.' + item).show();
}
else
{
$('.' + item).hide();
}
}
else
{
//Show all rows
}
});
}
});
});
HTML:
<table border="1">
<tr id="header">
<td>1</td>
<td><select id="cars">
<option value=""></option>
<option value="bmw">BMW</option>
<option value="audi">AUDI</option>
<option value="mercedes">MERCEDES</option>
</select></td>
</tr>
<tr class="bmw">
<td>3.16</td>
<td>BMW</td>
</tr>
<tr class="bmw">
<td>3.18</td>
<td>BMW</td>
</tr>
<tr class="bmw">
<td>3.00</td>
<td>BMW</td>
</tr>
<tr class="audi">
<td>A1</td>
<td>AUDI</td>
</tr>
<tr class="audi">
<td>A3</td>
<td>AUDI</td>
</tr>
<tr class="mercedes">
<td>300sel</td>
<td>MERCEDES</td>
</tr>
</table>

Working Fiddle
Add this else part in your code
else {
$('table tr').show();
}

just place this:
$(this).closest('table').find('tr:hidden').show();
Although you can simplify your code like this:
$("#cars").change(function(){
$(this).closest('table').find('tr:gt(0)').hide();
this.value !== '' ? $('.'+this.value).show() : $(this).closest('table').find('tr:hidden').show();
});

Your code is unnecessarily complex. You don't need map, foreach, etc.
$("#cars").change(function()
{
$('tr[id!=header]').hide()
if (this.value)
$('.' + this.value).show()
else
$('tr').show()
}
)

DOM elements/innetHTML add to table from dialog

Okay. This is a long one. So I have a page with a table containing various information about cars and the dealerships they came from. There is a button to add more cars with different years. This button opens a dialog. The dialog has 3 drop downs and one text input. I need the information from each drop down and the text input to add to the parent page. I'm halfway there. The information is adding the value of the input box, the text to the parent table within the "son" part of the table. I need this also to add the chosen value of the "son" drop downs on the same row of this text. One more thing. The "father" drop down needs to direct where the "son" information goes. Currently, my text is adding a new row to the bottom of the table under no specific father. I have stripped my code as much as possible so it's not overwhelming to look at, if there's a bracket missing somewhere it's an oversight. Here is the code and html for the parent page.
<head>
<script>
function updateParent1(value1,value2) {
var table = document.getElementById("car_table");
var rowCount = table.rows.length;
//alert(rowCount);
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "";
var cell2 = row.insertCell(1);
cell2.innerHTML = value2;
</script>
</head>
<body>
<legend>Vehicle Information</legend>
<input type="text" id="shore_count" />
<div class="add_icon"><img src="images/add-item-icon.png"/></div>
<table id="car_table">
<thead>
<tr>
<th>Dealership</th>
<th>Vehicle Details</th>
</tr>
</thead>
<tbody>
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">John Eagle Honda</td>
</tr>
<tr class="row_blue_bold son3">
<td> </td>
<td>Honda 2011 - Civic</td>
</tr>
<tr class="row_blue_bold son3">
<td> </td>
<td>Honda 2008 - Accord</td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">John's Used Cars</td>
<td>
</tr>
<tr class="son4">
<td> </td>
<td>Toyota 2002 - Camry</td>
</tr>
</body>
and here is the iframe/dialog page.
<script type="text/javascript">
$(document).ready(function () {
var id =3;
for (i=0;i<parent.getDescCount();i++) {
id++;
var prot = $("#numbers").find(".prototype").clone();
prot.find(".id").attr("value", id);
prot.find(".apni").attr("value","");
$("#numbers").append(prot);
}
//End of Add button
$("img.exit").click(function () {
parent.$.nmTop().close();
});
$("img.save").click(function () {
var isError = false;
$("input").each(function(i) {
if(this.value == "") {
isError = true;
var newRow = "<tr style='background:#ffff99'><td colspan='4'>Please enter the year of this vehicle.</td></tr><tr>";
$(this).parent().parent().before(newRow);
}
});
if(isError) return;
for(var j=0;j<document.getElementsByName("select1").length;j++) {
parent.updateParent1(document.getElementsByName("select1").item(j).value,document.getElementsByName("text1").item(j).value);
}
parent.$.nmTop().close();
});
});
//Add button
$("img.add").click(function () {
var prot = $("#numbers").find(".prototype").clone().first();
prot.find(".apni").attr("value","");
$("#numbers").append(prot);
}
</script>
<body>
<div id="selMultipleTitle"> Add Vehicle Information </div>
<div id="btnExitDialog"><img src="images/exit.png" height="17" width="17" class="exit"/></div>
<table id="numbers">
<thead>
<tr>
<th><strong>Make</strong></th>
<th><strong>Dealership</strong></th>
<th><strong>Model</strong></th>
<th><strong>Year</strong></th>
</tr>
</thead>
<tr>
<tbody>
<td><select id="fatherDeal" name="select1">
<option selected>Select...</option>
<option>John Eagle Honda</option>
<option>Toyota of America</option>
<option>John's Used Cars</option>
</select></td>
<td><select id="sonMake">
<option selected>Select...</option>
<option>Honda</option>
<option>Toyota</option>
</select></td>
<td><select>
<option selected id="sonModel">Select...</option>
<option>Civic</option>
<option>Accord</option>
<option>Camry</option>
</select></td>
<td><input value="Enter year" id="sonComment" class="apni" name="text1"/></td>
<td> </td>
</tbody>
</tr>
<tr>
<td class="align_right"><img src="images/cancel.gif" height="21" width="21" class="exit"/> <img src="images/save-icon1.png" height="21" width="21" class="save"/></td>
</tr>
</table>
</body>
Thanks in advance.

You need a dropdown as a source
<select id="source">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
And a target table
<table id="target">
</table>
And of course some kind of controller, I used a button.
<button id="control">clickme</button>
Now you only have to bind an action to the button and make it append the contents you want from your source into your target.
$(function() {
$('#control').click(function() {
$("#target").append("<tr><td>"+$("#source").val()+"</td></tr>");
});
});
Here is a fiddle: http://jsfiddle.net/X5DUv/