Simple Javascript to Hide a row

Here is a short piece of Javascript that will hide the row of a table:

<!DOCTYPE html>
<html>
<head>
<script>
function hide(my_id) {
//alert(“working on row ID# “+my_id);
document.getElementById(my_id).style.display = ‘none’;
}
</script>
</head>

<body>
<table border=“1”>
<tr id=“row_1” onclick=“hide(‘row_1’);”>
<td>Row #1 Always visible</td>
</tr>

<tr id=“row_2” onclick=“hide(‘row_2’);”>
<td>Row #2 Hide this</td>
</tr>

<tr id=“row_3” onclick=“hide(‘row_3’);”>
<td>Row #3 Always visible</td>
</tr>

</table>

</body>

</html>

This is the trimmed down version of code that I use to delete row data. So, let’s say I list several rows containing student data and each row identifies one unique student. I include an icon

using the following php code

print “<td><img onclick=\”change_value(” . $row[‘student_id’] . “, ‘delete’, ‘delete_value” . $row[‘student_id’] . “‘)\” src=\”../images/red_x_icon.png\” alt=\”delete_row\”><span id=\”delete_value” . $row[‘student_id’] . “\”>&nbsp;</span></td>\n”;

When the user clicks on the red icon with the “X” I include code that will delete the data associated with the student ID (perhaps a duplicate attendance record that was entered incorrectly) and upon successful completion I then hide the row. Cool!

Happy coding!

This entry was posted in Activity, code, Education, html, Javascript, Javascript, online school records, Panagiotopoulos, php, Software, STEM, support, training and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *