[FIXED] How to close the table on click in JavaScript?

Issue

I have a table which takes the user details. The code is as follows:

<table id="record" border=1>
    <tr>
        <td>Emp Name</td> 
        <td><input type="text" placeholder="Employee Name"></td>
    </tr>
    <tr>
        <td>Address</td>
        <td><input type="text" placeholder="Address"></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="Add">
            <input type="button" value="Cancel">
        </td>
    </tr>
</table>

Now, when I click on the Cancel button, the table should close. How can I do this?

Solution

Just give the input button an id...

   <input type="button" id="close" value="cancel">

Then add some Jquery...(assuming you are using jquery)

 $(document).ready(function(){

    $('#close').click(function(){$('#record').hide();});

 });

DEMO HERE

Or theres the one liner...

  <input type="button" value="cancel" onclick="$('#record').hide();">

DEMO 2

EDIT

And....Your request for just pure javascript...

<input type="button" id="close" value="Cancel" onclick=" document.getElementById('record').style.display = 'none';">

DEMO 3

Answered By - Kylie

Answer Checked By - Senaida (PHPFixing Volunteer)