0

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

$(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>

谢谢

4

1 回答 1

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

于 2013-01-19T10:52:45.900 回答