Hide/show elements in plain JavaScript [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 13 years ago.

I wrote a few lines of jQuery code, but don't know how to realize this in plain JavaScript. That output:

echo "<tr id='perf_row' class='table_header_tr' name='tr_$row_fio_perf[0]'>
 <td class='table_header_td' name='td_$i'>
 $i
 </td>
 <tr>";

search input. When user inputs chars, table rows (output higher) must hide and show only what matches the search word.

<input type="text" onkeyup="showPerformers();" id="ShowSearchPerformers">
 function showPerformers(){ 
 var search_login = $('#ShowSearchPerformers').val();
 search_login = search_login.toLowerCase(); 
 $('tr[name^=tr_]').hide();
 var search = 'tr[name*=' + search_login+']';
 $(search).show(); 
 }

How to write this function in JavaScript, not jQuery?

• Felix Kling: Why don't you want to use jQuery?
• m90: What's your browser target? Being able to use querySelectorAll would be of great help here, yet it won't work in IE7.
• socm_: felix, i learn before jquery, now try to learn js))
• socm_: m90, last version chrome and firefox, i can hide all table rows but dont know how to show them, can you give me the scheme, only functions which can help me to do this and i'll do it)
• crafter: It boggles me how this question, which relates to core javascript language, is flagged as too localized.

Answer 1

I would suggest a different approach all together, but based on your code, and not over-complicating things too much:

<input type="text" onkeyup="showPerformers(this,event);" id="ShowSearchPerformers">

Passing the input element to the function saves a DOM scan (getElementById, or in jQuery $('#id')). Also passing the event object might prove useful given time.

function showPerformers(search_login,e)
{
 search_login = search_login.value.toLowerCase();
 var table = document.getElemebtById('YourTblId');
 var row = table.getElementsByTagName('tr');
 var nameSearch = new RegExp('^tr_' + search_login);
 for (var i=0;i<row.length;i++)
 {
 if (row[i].name.substr(0,3) === 'tr_')
 {
 row[i].style.display = '';//make previously hidden rows visible again
 if(!row[i].name.match(nameSearch))
 {//row name starts with tr_, but not tr_[searched number]
 row[i].style.display = 'none';
 }
 }
 }
}

If I'm not mistaken, this should work, and perform as you expect it to. It does need some fine-tuning though, but I wouldn't want to spoil your fun :). Just a tip, as it now stands, you have no guarantee that the user-input is numeric: entering a would hide all rows, and show none, for example. You could fix that by either:

value.replace(/[^0-9]/g,'');//leaves only numbers
Math.floor(parseFloat(value));//Math.floor(parseFloat(' 123.1s')) --> 123

Just play a little, BTW this site is a great sandbox for stuff like this

• socm_: i tried this code, not work, but i'll fix that strictly to my example. Truth Is Out There! thanks
• Elias Van Ootegem: @user1506183: try setting up a fiddle with the code you have (one for the working code, another for the "pure JS" code, maybe somebody here can see the problem. It's hard to write correct code for a DOM tree I can't see...