我已经创建了一个应用程序-它已经完成了,但是我有一个小问题:如何在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>