Need to hide <tr> by name attribute

Question

I need to hide tr by attribute name here is the code

<tr name="see items ordered">
<td>
</td>
</tr>

I tried the below code but its not working

<script type="text/javascript">
var xyz = document.getElementsByName("see items ordered");
xyz[0].style.display="none";
</script>

If is there any way using js,jquery or css to hide by name attribute please assist me.

Answer 1

Your code seems to be working, you are probably try to access before elements added to DOM, use document.ready to ensure element get added to DOM. Or but the script just before the body ending tag.

Live Demo

$(document).ready(function(){
    var xyz = document.getElementsByName("see items ordered");
    xyz[0].style.display="none";
});

or, putting it just before ending body tag.

<script type="text/javascript">
   var xyz = document.getElementsByName("see items ordered");
   xyz[0].style.display="none";
 </script>
</body>

Answer 2

You need to wrap the code in dom ready handler. also can use name-value selector to target the tr:

$(document).ready(function(){
  $('tr[name="see items ordered"]').hide();
});

Answer 3

Here is the CSS solution using attribute selector.

this selector will look the see word. Check the DEMO .

tr[name~="see"]
{color:green;}

See the attached screenshot.

Answer 4

Maybe this works. Demo here: http://jsfiddle.net/3K8Ft/

<table>
    <tr name="see items ordered">
        <td>
            Test 1
        </td>
    </tr>
    <tr>
        <td>
            Test 2
        </td>
    </tr>
</table>

JS:

var xyz = document.getElementsByName("see items ordered");
xyz[0].style.display="none";