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

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

这是编辑功能的样子：

<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 以便更新 title 的新值给定的 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://whosebug.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://whosebug.com/posts/45861223/edit" readOnly></td>
      <td><input type="button" name="edit" value="Edit" onclick="action(12345)"></td>
    </tr>
  </tbody>
</table>

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

Mapping html form input to javascript object inside a newly formed element

javascript

php

jquery

javascript-objects

jquery-ajaxq