新しく形成された要素内のjavascriptオブジェクトへのhtmlフォーム入力のマッピング

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>