隐藏后仍保留输入值

时间:2016-07-26 01:00:49

标签: javascript jquery

我有一个编辑功能,如果我点击编辑,它们是一个隐藏/显示的功能。我的问题是,如果我要隐藏它,我怎么能保持行的价值?

例如我有这个对话框

R programming language

并决定编辑样本1(第一行)

enter image description here

然后我决定我意识到我不想编辑样本1然后关闭它(通过再次单击编辑)然后我想编辑样本5但我收到此错误

enter image description here

这是我的脚本

//show and hide update button checker
function update_contain(){
    var row = jQuery(".beneficiaries_rows input[type='text']:visible").length;
    if(row > 0){
        jQuery('.ui-dialog-buttonpane button:contains("Update")').button().show();
    }else{
        jQuery('.ui-dialog-buttonpane button:contains("Update")').button().hide();
        }
    }


//beneficiaries edit
jQuery(".edit_beneficiaries").click(function(){
  var row = jQuery(this).closest(".beneficiaries_rows");
  var show = row.find(".hide");
  var hide = row.find(".show");
  if(jQuery(show).is(":visible")){
    jQuery(show).css({"display":"none"});
    jQuery(hide).css({"display":"inline-block"});
  }else{
    jQuery(hide).css({"display":"none"});
    jQuery(show).css({"display":"inline-block"});
  }
  update_contain();
});

HTML

<table style="border: 2px solid black;margin:auto;">
    <tr>
        <th style="width:145px;"><center>Name<center></th>
        <th><center>Action</center></th>
    </tr>
    <?php
        while($row1 = mysql_fetch_array($result1)){
            echo "<tr class='beneficiaries_rows' id='".$row1['id']."' data-id='".$row1['ben_id']."'>";
            echo "<td><input class='hide' type='text' name='bename_update' value='".$row1['name']."'></div>";
            echo "<div class='show'>".$row1['name']."</td>";
            echo "<td>";
            echo "<center><button class='del_beneficiaries'>X</button><button class='edit_beneficiaries'>Edit</button></center>";
            echo "</td>";
            echo "</tr>";
        }
    ?>
</table>
  

P.S我的英语不太好,这就是为什么我要张贴一张图片来详细说明   我的问题

1 个答案:

答案 0 :(得分:2)

您需要使用类似的内容设置标签内的文字

jQuery("[selector for your label]").html(jQuery("[selector for input]").val());

我建议您在隐藏输入之前单击此操作。

编辑;因为你没有真正关注:

jQuery(".edit_beneficiaries").click(function(){
    var row_display = jQuery(this).parents("tr").find(".show");
    var row_edit = jQuery(this).parents("tr").find(".hide");
    jQuery(row_display).html(jQuery(row_edit).val());
});