javascript - 如何使用jquery在文本框下方显示消息

Question

我已经创建了一个应用程序 - 大部分已完成，但我有一个小问题:如何在文本框下方显示消息。

如果您单击编辑按钮，文本框将出现在可编辑选项的每一行，但我想在出现一个可编辑选项的文本框下方显示文本剩余计数.

我执行了以下操作，但效果不佳。

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

Answer 1

只需更改可编辑跨度元素的定位，将其设置在nestedTable div之前

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