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

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.

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(); 
})

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');

you cant't just replace tr-s to p-s in a table. i would recommend, to extract all the stuff from the table cells (td-s), and wrap them with p-s, place them after the table, and finally remove the table.

Jquery's .html method adds HTML inside the matched element. The example you gave will give you:

<input id="patientForm_f_name">blah</input>

What you want is to replace the matched element. You can do this with the .replaceWith method.

Try:

$('#patientForm_f_name').replaceWith('blah');

If you want to replace all the trs just use

$('tr').html('');

This will erase all the html inside the tr.