jquery - replace row with form

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.

am i right? you want to generate a form of the entire table, or just a row? — therufa
– therufa, Commented Dec 7, 2011 at 20:27
Just a row. When you click the edit button in the row it opens a form in the row only. — Tom
– Tom, Commented Dec 7, 2011 at 20:39

JesseBuesking · Accepted Answer · 2011-12-07 20:26:30Z

2

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

answered Dec 7, 2011 at 20:26

JesseBuesking

6,6165 gold badges46 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Tom Over a year ago

closest looks like a great function to use here...but it doesn't work. For some reason it only hides the first row. Any ideas?

JesseBuesking Over a year ago

That's because I'm telling it to hide the first row ;p $(this).closest('tr') is retrieving the current row that the #editbutton is inside of. Once you have the row you can perform whatever logic you need to against it.

Tom Over a year ago

But from what I understand of closest (which is not much granted) what you gave me should still work for my other rows. If I click the editbutton in any other row I would have thought it would hide the corresponding row. But clicking the editbutton on any other row does nothing?

JesseBuesking Over a year ago

@TomPepernic could you create a jsfiddle.net to show me what problems you're running into. I could help you troubleshoot it.

Tom Over a year ago

Here it is. Not exactly the same as I have a bunch of php code that generates this but at least has the same behavior: jsfiddle.net/h34Hr Try clicking the edit buttons for different rows. Only the first one works. But still I want to create the form inside the row of the table (wasn't sure how to do that so I just put it in a div at the end)

|

Collectives™ on Stack Overflow

jquery - replace row with form

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related