JavaScript: To hide all grid rows when checkbox is checked and on button click

Question

For this code below, I need your expertise.

 <html>
    <head>
    <script>
    function delrow() {

       document.getElementById("db_grid_row1").style.display = 'none';
       document.getElementById("db_grid_row2").style.display = 'none';
       document.getElementById("db_grid_row3").style.display = 'none';
       document.getElementById("db_grid_row4").style.display = 'none';

    }
    </script>
    </head>
    <body>
    <form action="rowhide_action.php" method="post" name="save_form">

    <input type="button" value="Delete" onClick="delrow();"></input>


    <table border="1">
    <thead>
    <tr>
    <th>#</th>
    <th>Databases</th>
    </tr>
    </thead>

    <tbody id="db_grid">

    <tr id="db_grid_row1">
    <td><input type="checkbox" name="cbox[]" value="1" ></input></td>
    <td><input type="text" name="db[]" value="Oracle"></input></td>
    <td><input type="hidden" name="modeflag[]" value="S" ></input></td>
    </tr>

    <tr id="db_grid_row2">
    <td><input type="checkbox" name="cbox[]" value="1"></input></td>
    <td><input type="text" name="db[]" value="MySQL"></input></td>
    <td><input type="hidden" name="modeflag[]" value="S"></input></td>
    </tr>

    <tr id="db_grid_row3">
    <td><input type="checkbox" name="cbox[]" value="1"></td>
    <td><input type="text" name="db[]" value="Cassandra"></input></td>
    <td><input type="hidden" name="modeflag[]" value="S"></input></td>
    </tr>

    <tr id="db_grid_row4">
    <td><input type="checkbox" name="cbox[]" value="1"></input></td>
    <td><input type="text" name="db[]" value="Mongo"> </input></td>
    <td><input type="hidden" name="modeflag[]" value="S"></input></td>
    </tr>

    </tbody>
    </table>
    </br>
    <input type="submit" value="Save"></input></br></br>
    </form>
    </body>
    </html>

When check-boxes are checked and delete button is clicked, I want (1) The checked-box rows have to be hidden. (2) change element modeflag[] value="D" for the hidden rows

please help. Thanks in advance.

can you use jquery, or only pure js?

webkit
– webkit

2014-06-16 14:15:06 +00:00
Commented Jun 16, 2014 at 14:15 — webkit
– webkit, Commented Jun 16, 2014 at 14:15

webkit · Accepted Answer · 2014-06-16 14:26:01Z

2

with jquery it goes like this:

$(function() {
     $("#del").on('click', delrow);
});
function delrow() {
    var checks = $( "input[type=checkbox]:checked" );
    checks.parent().parent().hide();
}

DEMO

notice I removed the event from your html element to the javascript.. let me know if you have any questions

answered Jun 16, 2014 at 14:26

webkit

3,3691 gold badge19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prakash Raj Over a year ago

Hi webkit, It is not working. Do i need to include any .js file? Also could you please answer my #2 question: "change element modeflag[] value="D" for the hidden rows"

Prakash Raj Over a year ago

Hi webkit, Thanks a lot. It is working good, I added the jquery-1.8.3.min.js file. Could you please answer my #2 question: "change element modeflag[] value="D" for the hidden rows"

webkit Over a year ago

@PrakashRaj Do you still need help with #2?

Collectives™ on Stack Overflow

JavaScript: To hide all grid rows when checkbox is checked and on button click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related