Question

I have a html table that is generated by looping through DB entries. On the row is an edit button.

<tr id="<?php echo $i; ?>">
...
<td><button id="editbutton" onClick='edit("<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>","<?php echo $result_cameras[$i]["camera_name"]; ?>", "<?php echo $camera_quality; ?>", "<?php echo $camera_status; ?>", "<?php echo $email_notice; ?>", "<?php echo $result_cameras[$i]["camera_hash"]; ?>")'>Edit</button></td>
...
</tr>

If you click the button it generates a form. Right now the form is just put below the table. Here is the edit function:

function edit(to, cameraname, cameraquality, camerastatus, emailnotice, camerahash)
{
var mydiv = document.getElementById("editform");
var myForm = document.createElement("form");
myForm.method = "post";
myForm.action = to;

//camera name
var label = document.createElement("label");
label.for = "text";
label.innerHTML="Camera name: ";
myForm.appendChild(label);

var myInput = document.createElement("input");
myInput.setAttribute("name", "camera_name"); 
myInput.setAttribute("value", cameraname);
myForm.appendChild(myInput);

//bunch of other code for different parts of the form...

//submit changes button...doesn't do anything yet...
mySubmit = document.createElement("input");
mySubmit.type = "button";
mySubmit.name = "apply_changes";
mySubmit.value = "Apply changes"
myForm.appendChild(mySubmit);

//cancel changes button...doesn't do anything yet...
myCancel = document.createElement("input");
myCancel.type = "button";
myCancel.name = "cancel_changes";
myCancel.value = "Cancel"
myForm.appendChild(myCancel);

mydiv.appendChild(myForm);

}

What I want to do is have the row in the table replaced by this form (in some sort of nicely formatted way). I thought I might be able to use jquery as I do have an id that I loop through for the table row. For example:

var js = jQuery.noConflict();
js(document).ready(function(){
  js("#editbutton").click(function(){
  js('#0').hide();
  });
});

This shows I can hide the first row by hard coding the first element (#0). I’m just not sure how to pull in the id based on the edit button row I just selected. Then change this row to show the form.

Answer 1

$(document).ready(function () {
    $('#editbutton').click(function () {
        $(this).closest('tr').hide();
    });
});