Menu
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” (since all the id’s are in the format `celltohid#
“`
<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?