我已经创建了一个应用程序-它已经完成了,但是我有一个小问题:如何在textbox下面显示消息。

如果单击“编辑”按钮,则可编辑选项的每一行都会出现textbox,但是我想在textbox下方显示一个可编辑的文本剩余数量。

我做了以下工作,但是效果不佳。



$(function() {

  $(".edit").click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var btn = $(this);
    var td = btn.closest("tr").find(".editable");


    //Save current text in td data attribute

    if (btn.text() === "edit") {
      //store the current value only on click of EDIT and not on save
      var currentValue = td.text();
      $(td).data("current-value", currentValue);
      td.html("<input type='text' value=" + currentValue + " />");
      btn.html("save");
    } else {
      if (td.find("input").val() == "") {

        alert("please fill the text box")
      } else {
        td.html(td.find("input").val());
        btn.html("edit");
      }
    }

    var text_max = 25;
    $(td.find("input")).html(text_max + ' characters remaining');

    $(td.find("input")).keyup(function() {
      var text_length = td.find("input").val().length;
      var text_remaining = text_max - text_length;
      td.find("input").next().add("div").html(text_remaining + ' characters remaining');


    });


  });

  $(".cancel").click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var td = $(this).closest("tr").find(".editable");

    //Read data attribute to get saved text
    var currentValue = $(td).data("current-value");
    if (currentValue != "") {
      td.html(currentValue);


      //Set attribute to empty string
      $(td).data("current-value", "");
    } else {


    }
    $(this).parents('tr').find(".edit").html("edit");
  });



});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  margin-left: 2px;
  padding: 2px;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin: 2px;
}

li a:hover {
  background-color: #111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabledata">
  <thead>
    <th>RecID</th>
    <th>Col1</th>
    <th>opt</th>
  </thead>
  <tr>
    <td>
      <a>
        <div class="nestedtable">Tableshowing no need edit</div>
      </a><span class="editable">RecID1</span></td>
    <td>Val1.1</td>
    <td>
      <ul>
        <li> <a class="edit">edit</a></li>
        <li> <a class="cancel">cancel</a></li>
      </ul>


    </td>
  </tr>
  <tr>
    <td>
      <a>
        <div class="nestedtable">Tableshowings no need edit</div>
      </a><span class="editable">RecID2</span></td>
    <td>Val2.1</td>
    <td>
      <ul>
        <li> <a class="edit">edit</a></li>
        <li> <a class="cancel">cancel</a></li>
      </ul>
    </td>
  </tr>
  <tr>
    <td>
      <a>
        <div class="nestedtable">Tableshowing no need edit</div>
      </a><span class="editable">RecID3</span></td>
    <td>Val3.1</td>
    <td>
      <ul>
        <li> <a class="edit">edit</a></li>
        <li> <a class="cancel">cancel</a></li>
      </ul>
    </td>
  </tr>
</table>





Jsfiddle

最佳答案

只需在nestedTable div之前更改可编辑的span元素位置设置即可



$(function () {

    $(".edit").click(function (e) {
    	e.preventDefault();
        e.stopImmediatePropagation();
        var btn = $(this);
        var td = btn.closest("tr").find(".editable");


        //Save current text in td data attribute

        if(btn.text() === "edit")
        {
        //store the current value only on click of EDIT and not on save
          var currentValue = td.text();
          $(td).data("current-value", currentValue);
        	td.html("<input type='text' value="+currentValue+" />");
            btn.html("save");
        }
        else
        {
         if(td.find("input").val()==""){

        alert("please fill the text box")
        }else{
        	 td.html(td.find("input").val());
            btn.html("edit");
            }
        }

     var text_max = 25;
    $(td.find("input")).html(text_max + ' characters remaining');

    $(td.find("input")).keyup(function() {
        var text_length = td.find("input").val().length;
        var text_remaining = text_max - text_length;
        td.find("input").next().add( "div" ).html(text_remaining + ' characters remaining');


    });


    });

     $(".cancel").click(function (e) {
    	e.preventDefault();
        e.stopImmediatePropagation();
        var td = $(this).closest("tr").find(".editable");

        //Read data attribute to get saved text
        var currentValue = $(td).data("current-value");
        if(currentValue != "")
        {
        	td.html(currentValue);


            //Set attribute to empty string
            $(td).data("current-value", "");
        }else{


        }
        $(this).parents('tr').find(".edit").html("edit");
    });



});

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    margin-left:2px;
    padding:2px;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    margin:2px;
}

li a:hover {
    background-color: #111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabledata">
    <thead>
        <th>RecID</th>
        <th>Col1</th>
        <th>opt</th>
    </thead>
    <tr>
    <td><span class="editable">RecID1</span><a><div class="nestedtable">Tableshowing no need edit</div></a></td>
        <td>Val1.1</td>
        <td>
        <ul>
        <li> <a class="edit">edit</a></li>
         <li> <a class="cancel">cancel</a></li>
        </ul>


        </td>
    </tr>
    <tr>
    <td><span class="editable">RecID2</span><a><div class="nestedtable">Tableshowings no need edit</div></a></td>
        <td>Val2.1</td>
        <td>    <ul>
        <li> <a class="edit">edit</a></li>
         <li> <a class="cancel">cancel</a></li>
        </ul></td>
    </tr>
    <tr>
        <td><span class="editable">RecID3</span><a><div class="nestedtable">Tableshowing no need edit</div></a></td>
        <td>Val3.1</td>
        <td>    <ul>
        <li> <a class="edit">edit</a></li>
         <li> <a class="cancel">cancel</a></li>
        </ul></td>
    </tr>
</table>

10-07 19:58
查看更多