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”keydown事件。

将文本框中的td值转换为编辑并显示相同的值

1 个答案: