在textbox中转换Td值以编辑和显示Td值

Question

我有一列作为备注，我希望用户让输入备注任何他们想要的，它应该显示每次他们看到这个表我搜索了很多，最后使用这个代码，但它不工作，当用户点击备注，它应该是可编辑的，但它不工作

$(document).ready(function() {
$('#mylist_remark').on('click', '.Edit', function() {
        $(this).closest('tr').find('td:eq(1)').each(function() {
            // replace the existing text with a textbox containing that text
            var existingVal = $(this).text();
            $(this).html('<input type="text" value="' + existingVal + '" >');
        });
    });

    // when the user is finished editing, change the value and remove the textbox,and display edited text
    $('#mylist_remark').on('focusout', 'td input', function() {
        $(this).parent().html( this.value );
    });
});

脚本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

表代码

    <table id="mylist_remark">
    <caption>SELECTED CANDIDATE LIST</caption>
    <!-- headings -->
        <tr>
          <th> </th>
          <th>REMARK</th>
        </tr>
   <?php $i=0;
    while($data_set = mysql_fetch_array($mresult_set))
        {     
            echo "<tr id=\"{$listrowid}\">";                                
            echo "<td><a href\"\" class=\"Edit\">remark</a></td>";
            echo "</tr>";
            $i++;                       
            }?>
    </table>

谢谢

Answer 1

您是否考虑过使用"contenteditable“属性，而不是所有这些操作？

<td class="editable" contenteditable="true">Something</td>

$("#mylist_remark .editable").bind("blur", function(e) { 
  console.log($(e.target).text());
  $.post("/somewhere", {remark: $(e.target).text(), candidate_id: $(e.target).nearest("tr").attr("id")}, function() { console.log("success"); });
  //save the result to the server or whatever you need to do to make it persist
});

您还需要绑定"enter“和"escape”按键事件。