jquery - 用表单替换行

时间:2011-12-07 20:21:20

标签: javascript jquery

我有一个通过循环数据库条目生成的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>

如果单击按钮,则会生成表单。现在表格刚好放在桌子下面。这是编辑功能:

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。然后更改此行以显示表单。

1 个答案:

答案 0 :(得分:2)

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