How to show a HTML table without using getelementbyid and same?

Viewed 53

I'm having this problem. I have a HTML code which will show a table. The problem is I cannot use any id, name or whatever can be identify by getElementByID and same. I also have a dropdownlist have 2 value "Yes" and "No". I want to write a JavaScript or jsp tag which will show the table when I choose the value "Yes", and make it disappear completely when I choose "No". Note: I cannot write a script make the page to reload So how should I write the code? I'm thinking about using javescript like

<script>
function onchangedropdownlist
if(dropdownlistvalue = 1)
{
</script>
Code html table
<script>
}
</script>

or maybe I can use c:if. But i'm not sure how to use c:if with onchange.

1 Answers

You can use document.getElementsByTagName("table")[0] to get the reference of your table and then use .style.display to block(show) or none(hide) your table.

Demo Code:

function onchangedropdownlist(dropdownlistvalue) {
//if value is yes
  if (dropdownlistvalue == "yes") {
  //show table
    document.getElementsByTagName("table")[0].style.display = "block"
  } else {
  //hide table
    document.getElementsByTagName("table")[0].style.display = "none"
  }
}
<table>
  <tr>
    <td>
      soemthing
    </td>
  </tr>
</table>

<select onchange="onchangedropdownlist(this.value)">
  <option value="yes">Yes</option>
  <option value="no">No</option>
</select>

Related