点击时将标签更改为文本框？ [英] Changing a label to textbox on click?

问题描述

这段代码在一个循环中：

This block of code is inside a loop:

<label id=\"col_{$child_column_id}\">{$child_column_id}</label>

<input type=\"text\" id=\"{$child_column_id}\" onblur=\"cancelRename(this, this.id)\" style=\"display:none\">

<br>

<label id=\"{$child_column_id}\" onclick=\"renameColumn(this.id, this.id)\">Rename</label> /

<a href=\"".base_url()."index.php/table/deleteCol/{$child_column_id}\"> Delete</a> /

<a href=\"".base_url()."index.php/table/insertNewColumn/1/{$child_column_id}\">Split</a></td>";

当我点击重命名，它应该更改为保存，并且包含列的ID /名称的标签应更改为文本框。当我点击Save时，它会将更改提交给数据库;如果用户在文本框外部单击，它将取消更改并返回到标签。 '保存'将再次成为'重命名'。



我尝试过：

When I click on Rename, it should change to 'Save' and the label holding the id/name of the column should change to a textbox. When I click on Save, it will commit the changes to the database; if the user clicks outside the textbox, it will cancel the changes and go back to being a label. 'Save' will become 'Rename' again.

What I have tried:

//on click: show textbox, hide label
      function renameColumn(label_id, inputText_id)
      {
        alert('Entered rename' label_id);
        //change 'Rename' to 'Save'
        document.getElementById(label_id).innerHTML = 'Save';
        $(label_id).css('display', 'none');
        $(inputText_id)
        .val($(label_id).text())
        .css('display','')
        .focus();
      }

      //on blur
      function cancelRename(editText, label)
      {
        document.getElementById(label).innerHTML = 'Rename';
        $(editText).css('display', 'none');
        //$(column_id)
        .css('display', '');
      }

      //on save
      function saveColumnName(editText_value, column_id)
      {

        document.getElementById(label).innerHTML = 'Rename';
      }

推荐答案

child_column_id} \ > {

child_column_id}\">{

child_column_id} < / label >

< 输入 类型 = < span class =code-keyword> \ text \ id = \ {

child_column_id}</label> <input type=\"text\" id=\"{

child_column_id} \ onblur = \ < span class =code-attribute> cancelRename（this， this.id）\ style = \ display：none \ >

< br >

< label id = \ {

child_column_id}\" onblur=\"cancelRename(this, this.id)\" style=\"display:none\"> <br> <label id=\"{

这篇关于点击时将标签更改为文本框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！