Hide submit button and fields on click

Question

Users input data and then submit.

How do I put submitted data in this cell of table and then hide the fields on submit button Click

<td>
    <input type="text" placeholder="Module Code" class="Event" />
    <input type="text" placeholder="Module" class="Event" />
    <input type="text" placeholder="Room" class="Event" />
    <input id="Submit1" type="submit" value="submit"/>  

Here is http://jsfiddle.net/fJTr8/

THANKS FOR YOUR HELP

Answer 1

Do you mean something like this http://jsfiddle.net/fJTr8/7/

$('#Submit1').parent('td').css('background-color','red')
$('#Submit1').click(function() {
    var module_code = $('#module_code').val()
    var module = $("#module").val();
    var room = $("#room").val();
   var td ="<td class='"+module_code+"'><div>"+module_code+"</div><div>"+module+"</div><div>"+room+"</div></td><td>"
   $(this).parent('td').html(td)
});

Answer 2

Put the input tags inside a div (with a unique ID). Assign a unique ID to each of the input tags and to the <td> element too. Then:

$('#button-id').click(function() {
   $('#div-id').hide();
   $('#td-id').html(/* retrieve the data from the input tags */);
});