当前位置: 动力学知识库 > 问答 > 编程问答 >

ajax - jquery replace each input with it's value. then switch/toggle back to having inputs

问题描述:

I have a table created by an AJAX request. Each of the TDs have a Textbox Input inside it. This allows the user to edit content. I want to have a "read only" mode where the user can't edit content (at the user's discretion). For this, I want the user to be able to press a button (radio buttons would also be fine) that replaces each of the Textbox Inputs with a

tag containing the value of the text box as its text. Currently, my code replaces each of Inputs with the text "object Object". (Maybe I haven't converted the values to text strings correctly??) Any tips to let me know what's going wrong would be greatly appreaciated. Thanks!!

This is my current script:

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

And this is a snippet of what the HTML could look like:

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

网友答案:

jQuery's each function returns the jQuery object it was called on ($('cells') in your case). So your current code is replacing each element matched by the .cells selector with the jQuery object, which is serializing to "object Object".

What you want is something more like

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

Or just disable cells:

$("#permissionsbutton").live('click',function(){ 
  $('.cells').attr('disabled',true);
});
网友答案:

How about:

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

Try it here

分享给朋友:
您可能感兴趣的文章:
随机阅读: