将 html 表单输入映射到新形成的元素内的 javascript 对象

Question

我有以下html。请看一下，我会在我们进行时解释这个问题。

<table>
<tbody>
<tr id="<?php echo $record['id']?>" style="...">
<td><?php echo $record['id']; ?></td>
<td><?php echo $record['url']; ?></td>
<td><input type="button" name="edit" value="Edit" onclick="edit(<?php echo ($record['id'])?>)"></td>
</tr>
</tbody>
</table>

我在这里要实现的是，当我单击"编辑"按钮时，它会清除该字段并在其位置创建新的空字段，可以在其中再次输入这些详细信息，并代替编辑按钮，出现更新按钮。

编辑函数如下所示：

<script>
function edit(id){
var element = document.getElementById(id);
$(element).empty();
$(element).append("<td><input  name='id' value="+id+" disabled></td>" +
"<td><input type='text' name='url' ></td>" +
"<td><input type='text' name='title'></td>" +
"<td><input type='button' value='Update' onclick='testFunction()'></td>");
}

更新按钮会触发一个名为 testFunction 的函数。现在在这个testFunction中，我想将新值发送到我用jQuery创建的新表单中，以便我可以将这些值发送到MySQL，以便为给定id更新标题的新值。

请查看代码并告诉我应该如何解决这个问题？

var testFunction = function(newID){
console.log("This is the NEW id of the object that we are changing----->");
console.log(newID);
console.log("--------------------------END------------------");
$.post( "update", { id: newID})
.done(function( ) {
document.getElementById(id).style.display = "none";
});
};
</script>

Answer 1

//test record
var record = {
id: 12345,
title: 'Some title',
url: 'https://stackoverflow.com/posts/45861223/edit'
};
function action(id) {
var $element = $('#' + id),
$title = $('[name=title]', $element),
$url = $('[name=url]', $element),
$btn = $('[type=button]', $element),
isUpdate = ($btn.attr('value') != 'Edit');
$title.prop('readOnly', isUpdate);
$url.prop('readOnly', isUpdate);
$btn.attr('value', isUpdate ? 'Edit' : 'Update');
if (isUpdate) {
// show some loading mask
$.post("update", {
title: $title.val(),
url: $url.val(),
id: id
})
.done(function() {
// here you have the new id from the server
// hide the loading mask
});
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="12345">
<td><input type='text' name='title' value="Some title" readOnly></td>
<td><input type='text' name='url' value="https://stackoverflow.com/posts/45861223/edit" readOnly></td>
<td><input type="button" name="edit" value="Edit" onclick="action(12345)"></td>
</tr>
</tbody>
</table>