如何使用jQuery在文本框下方显示消息

Question

我已经创建了一个应用程序-大多数已经完成了，但是我有一个小问题：如何在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> 

杰斯菲德尔

Answer 1

只需在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> 

Answer 2

add()方法用于创建一个新的jQuery对象，并将元素添加到匹配的元素集中

您可以将您remaning character值:before的的editable像下面跨度：

 $(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"); $('.editable').removeClass('showBefore'); } } var text_max = 25; $(td.find("input")).keyup(function() { var text_length = $(this).val().length; var text_remaining = text_max - text_length; $(this).closest('.editable').attr('data-char', text_remaining).addClass('showBefore'); }); }); $(".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"); $('.editable').removeClass('showBefore'); }); }); 

 body { font: 13px Verdana } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } .editable.showBefore:before { content: attr(data-char) "character remaning"; position: absolute; bottom: -14px; width: 100%; } table { width: 100%; border: 1px solid #ccc; border-collapse: collapse; } td, th { padding: 6px; border: 1px solid #ccc; } .editable { position: relative; display: block; } 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>