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

Posted 2023-05-09

【中文标题】jquery 用它的值替换每个输入。然后切换/切换回有输入

【英文标题】：jquery replace each input with it's value. then switch/toggle back to having inputs

【发布时间】：2011-05-19 11:46:44

【问题描述】：

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

替换每个文本框输入

标记包含文本框的值作为其文本。目前，我的代码将每个输入替换为文本“对象对象”。 （也许我没有正确地将值转换为文本字符串？？）任何让我知道出了什么问题的提示都会非常感激。谢谢！！

这是我当前的脚本：

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

【问题讨论】：

“cells”是 textarea 还是 td 的类？看起来您正在遍历 tds 而不是进入 textareas。

【参考方案1】：

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

你想要的是更像的东西

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

【参考方案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);
);

【讨论】：

我同意你的观点，但我认为这个脚本不需要 .each()。你可以只做 $('.cells').attr('disabled',true)。仅供参考。 :)

【参考方案3】：

怎么样：

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

Try it here