Question

我有一个由AJAX请求创建的表。每个TD都有一个文本框输入。这允许用户编辑内容。我想要一个“只读”模式，用户无法编辑内容（由用户自行决定）。为此，我希望用户能够按下按钮（单选按钮也可以），用

标签替换每个文本框输入，其中包含文本框的值作为其文本。目前，我的代码用文本“object Object”替换每个Inputs。（也许我还没有正确地将值转换为文本字符串？）任何提示让我知道出错的地方都会受到很大的影响。谢谢！

这是我目前的剧本：

<script type="text/javascript">
    $("#permissionsbutton").live('click',function(){
        sss = $('.cells').each(function(){$(this).val()});
        $(".cells").replaceWith("<p class='readonlycells' type='text'>" + sss + "</p>");
    });
    // if this worked, I would write another few lines
    // to be able to switch back to having inputs
</script>

这是HTML的外观片段：

<div id="readwrite" class="settings">
    <h3>Permissions</h3>
    <button id="permissionsbutton">Switch to Read Only Mode</button>
</div>
<table><tr>
    <td><input class='cells' type=text value='Steve'></td>
    <td><input class='cells' type=text value='Mary'></td>
    <td><input class='cells' type=text value='Big Bird'></td>
</tr></table>

Answer 1

jQuery的each函数返回调用它的jQuery对象（在你的情况下是$('cells')）。因此，您当前的代码将使用jQuery对象替换.cells选择器匹配的每个元素，该对象序列化为“对象对象”。

你想要的更像是

$("#permissionsbutton").live('click', function() {
    $(".cells").each(function() {
        $(this).replaceWith($(this).val());
    }
});

Answer 2

$("#permissionsbutton").live('click',function(){ 
  $('.cells').each(function(){
    var cell=$(this);
    cell.replaceWith('<span class="cells_ro">'+cell.val()+'</span>');
  }); 
});

或者只是禁用单元格：

$("#permissionsbutton").live('click',function(){ 
  $('.cells').attr('disabled',true);
});

Answer 3

怎么样：

$("#permissionsbutton").click(function(){
$('.cells').attr('disabled','disabled');
});

Try it here

jquery用它的值替换每个输入。然后切换/切换回输入

3 个答案: