如何使用javascript/jquery在每行中添加编辑和删除按钮
我想在每一行中添加编辑和删除按钮,并想使用javascript编辑和删除行。我该怎么做呢。请检查下面的JSFIDLE如何使用javascript/jquery在每行中添加编辑和删除按钮,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在每一行中添加编辑和删除按钮,并想使用javascript编辑和删除行。我该怎么做呢。请检查下面的JSFIDLE First Name:<br> <input type="text" id="fName" /><br> Last Name: <br> <input type="text" id="lName" /><br> Gender: <br> <input type="text" id="gen
First Name:<br>
<input type="text" id="fName" /><br>
Last Name: <br>
<input type="text" id="lName" /><br>
Gender: <br>
<input type="text" id="gender" /><br>
Age: <br>
<input type="text" id ="age" /> <br>
<input type="button" id ="display" value="Display" /><br>
<table id= "table" border="1">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</table>
如果您单击编辑字段重新填充,然后再次单击“显示”以解决问题,则使用jQuery结束。这是一个非常简单的实现,但如果您打算对此进行扩展,我建议您使用Angular或某种模板库 JavaScript:
(function setup() {
var selectedRow = null;
var keys = ["fName","lName","gender","age"];
function resetValues(fName,lName,gender,age){
forEachInput(function(key){
$("#"+key).val('');
});
}
function forEachInput(callback){
for(var i = 0; i < keys.length; i++) {
callback(keys[i]);
}
}
function createRow(){
var row = $(".tr_clone").clone()
var newRow = row.appendTo("table").removeClass("tr_clone").fadeIn(1000);
forEachInput(function(key){
newRow.find("."+key).text($("#"+key).val());
});
resetValues();
selectedRow = null;
}
function applyValues(row){
forEachInput(function(key){
row.find("."+key).text($("#"+key).val());
});
}
function editRow(row){
forEachInput(function(key){
$("#"+key).val(row.find("."+key).text());
});
selectedRow = row;
}
$("#display").on("click", function () {
if(selectedRow === null){
createRow();
resetValues();
} else {
applyValues(selectedRow);
resetValues();
selectedRow = null;
}
});
$("table").delegate("button").on("click",function(e){
e.preventDefault();
if($(e.target).hasClass('edit')){
editRow($(e.target).parent("td").parent("tr"));
} else {
$(e.target).parent("td").parent("tr").fadeOut(1000).remove();
}
});
})();
(函数设置(){
var selectedRow=null;
变量键=[“fName”、“lName”、“gender”、“age”];
函数重置值(fName、lName、性别、年龄){
输出(功能(键){
$(“#”+键).val(“”);
});
}
函数forEachInput(回调){
对于(变量i=0;i
HTML
名字:
姓氏:
性别:
年龄:
名字
姓
性别
年龄
删除|编辑
我想这是有原因的,但是您考虑过使用库吗?这样做会更容易。
(function setup() {
var selectedRow = null;
var keys = ["fName","lName","gender","age"];
function resetValues(fName,lName,gender,age){
forEachInput(function(key){
$("#"+key).val('');
});
}
function forEachInput(callback){
for(var i = 0; i < keys.length; i++) {
callback(keys[i]);
}
}
function createRow(){
var row = $(".tr_clone").clone()
var newRow = row.appendTo("table").removeClass("tr_clone").fadeIn(1000);
forEachInput(function(key){
newRow.find("."+key).text($("#"+key).val());
});
resetValues();
selectedRow = null;
}
function applyValues(row){
forEachInput(function(key){
row.find("."+key).text($("#"+key).val());
});
}
function editRow(row){
forEachInput(function(key){
$("#"+key).val(row.find("."+key).text());
});
selectedRow = row;
}
$("#display").on("click", function () {
if(selectedRow === null){
createRow();
resetValues();
} else {
applyValues(selectedRow);
resetValues();
selectedRow = null;
}
});
$("table").delegate("button").on("click",function(e){
e.preventDefault();
if($(e.target).hasClass('edit')){
editRow($(e.target).parent("td").parent("tr"));
} else {
$(e.target).parent("td").parent("tr").fadeOut(1000).remove();
}
});
})();
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>First Name:<br>
<input type="text" id="fName" /><br>
Last Name: <br>
<input type="text" id="lName" /><br>
Gender: <br>
<input type="text" id="gender" /><br>
Age: <br>
<input type="text" id ="age" /> <br>
<input type="button" id="display" value="Display" /><br>
<table id= "table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr class="tr_clone" style="display:none;">
<td class="fName"></td>
<td class="lName"><input type="text" autofocus placeholder="location" name="location" ></td>
<td class="gender"><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
<td class="age"><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
<td class="buttons"><button class="delete">Delete</button> | <button class="edit">Edit</button></td>
</tr>
</table>