Dynamically replace <tr>s and their contained elements using jQuery

Question

I have a table that contains form elements that I need to replace if a use clicks a link. The idea is that the fields are automatically filled in for them if they click the button and the fields then become just html p elements because I don't want the user to be able to edit these fields once auto filled in. There are however other fields which will need to be still filled in.

So what I need is when user clicks link, 4 trs are replaced with 4 p tags with text inside them. This doesn't seem to be working on the trs. So I am now trying it on the td that contains the input field:

 $('#use_patient_field').click(function(e){
     e.preventDefault();
    $('#patientForm_f_name').html('blah');
    return false;
});

I have also tried overwriting the input fields and nothing happens with that either. I need the table to still exist but replace the input and select tags.

Answer 1

As I understand your question, you want to dynamically alter the contents of table rows when they are clicked. If your table looks like this:

<table id="grid">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
</table>

Then the following live eventhandler will change the cells in the row when you click them:

$('#grid tr').live('click', function(event) {
   var row = $(event.target);
   row.html('<td><b>some text</b><td>'); 
   event.preventDefault(); 
})

Answer 2

I have found what I was looking for. You can set an input field to read only, which meant I then didn't have to replace the form fields with p elements.

This is the code in case any future perosn needs it:

 $('.patient input').attr('readonly','true');