javascript - jquery - 用表单替换行

Question

我有一个通过循环数据库条目生成的 html 表。该行有一个编辑按钮。

<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>

如果单击该按钮，它会生成一个表单。现在表格就放在 table 下面。这是编辑功能:

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

}

我想要做的是将表中的行替换为这种形式(以某种格式良好的方式)。我想我也许可以使用 jquery，因为我确实有一个 id，可以循环遍历表行。例如:

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

这表明我可以通过对第一个元素 (#0) 进行硬编码来隐藏第一行。我只是不确定如何根据我刚刚选择的编辑按钮行提取 id。然后更改此行以显示表单。

Answer 1

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