jQuery表中的更新功能 [英] Update function in Jquery table
本文介绍了jQuery表中的更新功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
访问: http://jsfiddle.net/Aq8jB/7/
$(document).on("click", "#edit", function(e) {
var tr = $("#edit").parent();
$("#fname").html('<input type="text" value="'+$("#fname").text()+'">');
$("#cmpny").html('<input type="text" value="'+$("#cmpny").text()+'">');
$("#emailid").html('<input type="text" value="'+$("#emailid").text()+'">');
$("#phno").html('<input type="text" value="'+$("#phno").text()+'">');
$("#rmark").html('<input type="text" value="'+$("#rmark").text()+'">');
$("#actions").html('<input type="button" value="'+$("#actions").text()+'">');
var new_row = '<tr class="new_row"><td><input type="text" value="'+$("#fname").text()+'"></td><td><input type="text" value="'+$("#cmpny").text()+'"></td><td><input type="text" value="'+$("#emailid").text()+'"></td><td><input type="text" value="'+$("#phno").text()+'"></td><td><input type="text" value="'+$("#rmark").text()+'"></td><td><input type="submit" value="'+$("#actions").submit()+' id="addbutton""></td></tr>';
//tr.replaceWith(new_row);
});
推荐答案
使用此代码解决了您的问题
Solved your problem USe this code
更新的提琴=> http://jsfiddle.net/Aq8jB/11/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style>
#content{
position:absolute;
left: 12px;
top: 71px;
width: 1079px;
height: 58px;
font-size: 24px;
}
#content1{
position:absolute;
left: 298px;
top: 16px;
width: 375px;
height: 30px;
font-size: 14px;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
</head>
<body>
<form >
<p> </p>
<p> </p>
<p> </p>
<div id="content">
<p>INTERN ASSIGNMENT</p>
<div id="content1">
<a>Features</a>
<a> About</a>
<a> Contact</a></div>
</div>
<p> </p>
<table id="table_dynamic" width="50%" align="center" border="1px">
<thead>
<tr>
<td>Sn</td>
<td>Full Name</td>
<td>Company</td>
<td>Email</td>
<td>Contact no</td>
<td> Remarks</td>
<td>Actions</td>
</tr>
</thead>
</table>
<p> </p>
<p> </p>
<p> </p>
<p>First Name :
<input type="text" name="first_name" id="first_name" style="position:absolute; left: 137px; " placeholder="Full Name" /></p><br />
<p>Company:
<input type="text" name="Company" id="company" style="position:absolute; left: 137px; " placeholder="Company" />
</p>
<br>
<p>Email
<input type="email" id="email" style="position:absolute; left: 139px; width: 198px; height: 26px;" placeholder='Enter your mail_id' required />
</p>
<br>
<p>Contact No:
<input type="text" id="contact_no" style="position:absolute; left: 144px; " placeholder="98765-34567" size="40" >
</p>
<br>
<p>Remarks :
<input type="text" id="remarks" style="position:absolute; left: 149px; width: 346px; height: 79px;" >
</p>
<p> </p>
<p> </p>
<p><br>
<input id="addButton" type="button" value="AddRow" 3w3/> <input id="deleteButton" type="button" value="Delete" name="Delete" />
<input id="clear" type="button" value="Clear" name="Clear" />
<br/>
</p>
</form>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
$("#addButton").click(function (e) {
$("#table_dynamic").submit(function() {
var inputVal= $("#first_name").val();
var characterReg = /^([a-zA-Z0-9]{1,})$/;
if(!characterReg.test(inputVal)) {
$("#first_name").after('<span class="error">Maximum 8 characters.</span>');
}
});
var n=1;
var n1 = $("#first_name").val();
var n2 = $("#company").val();
var n3 = $("#email").val();
var n4 = $("#contact_no").val();
var n5 = $("#remarks").val();
if(n1!="") {
if(n2!="") {
if(n3!="") {
if(n4!="") {
if(n5!="") {
$("#table_dynamic").append('<tr><td>'+n+'</td><td id="fname">' + n1 + '</td><td id="cmpny">' + n2 + '</td><td id="emailid">'+ n3 + '</td><td id="phno">'+ n4 + '</td><td id="rmark">'+ n5 + '</td><td><input class="deleteButton" type="button" value="Delete" name="Delete"/><input id="edit" type="button" value="Edit" onClick="edit()"></td></tr>');
}
else {
alert("Remarks cannot be Empty");
}
}
else {
alert("Contact cannot be Empty");
}
}
else {
alert("Email cannot be Empty");
var atpos=n3.indexOf("@");
var dotpos=n3.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
}
else {
alert("Company cannot be Empty");
}
}
else {
alert("Name cannot be Empty");
}
});
$(document).on("click", ".deleteButton", function (e) {
var target = e.target;
$(target).closest('tr').remove();
});
$(document).on("click", "#edit", function(e) {
// alert($(this).attr("id"));
var tr = $("#edit").parent();
// alert(tr);
$("#fname").html('<input type="text" id="txtfname" value="'+$("#fname").text()+'">');
$("#cmpny").html('<input type="text" id="txtcmpny" value="'+$("#cmpny").text()+'">');
$("#emailid").html('<input type="text" id="txtemailid" value="'+$("#emailid").text()+'">');
$("#phno").html('<input type="text" id="txtphno" value="'+$("#phno").text()+'">');
$("#rmark").html('<input type="text" id="txtrmark" value="'+$("#rmark").text()+'">');
$("#actions").html('<input type="button" value="'+$("#actions").text()+'">');
var new_row = '<tr class="new_row"><td><input type="text" value="'+$("#fname").text()+'"></td><td><input type="text" value="'+$("#cmpny").text()+'"></td><td><input type="text" value="'+$("#emailid").text()+'"></td><td><input type="text" value="'+$("#phno").text()+'"></td><td><input type="text" value="'+$("#rmark").text()+'"></td><td><input type="submit" value="'+$("#actions").submit()+'"></td></tr>';
//tr.replaceWith(new_row);
$(this).attr("id","editFinal");
});
//After final click
$(document).on("click", "#editFinal", function(e) {
// alert($(this).attr("id"));
var tr = $("#edit").parent();
// alert(tr);
$("#fname").html($("#txtfname").val());
$("#cmpny").html($("#txtcmpny").val());
$("#emailid").html($("#txtemailid").val());
$("#phno").html($("#txtphno").val());
$("#rmark").html($("#txtrmark").val());
$("#actions").html('<input type="button" value="'+$("#actions").text()+'">');
var new_row = '<tr class="new_row"><td><input type="text" value="'+$("#fname").text()+'"></td><td><input type="text" value="'+$("#cmpny").text()+'"></td><td><input type="text" value="'+$("#emailid").text()+'"></td><td><input type="text" value="'+$("#phno").text()+'"></td><td><input type="text" value="'+$("#rmark").text()+'"></td><td><input type="submit" value="'+$("#actions").submit()+'"></td></tr>';
//tr.replaceWith(new_row);
$(this).attr("id","edit");
});
$("#clear").click(function (e) {
$("#first_name").val('');
$("#company").val('');
$("#email").val('');
$("#contact_no").val('');
$("#remarks").val('');
});
});
});//]]>
</script>
</body>
</html>
这篇关于jQuery表中的更新功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
