html表格可编辑单元格的更新和重置功能 [英] update and reset function for html table editable cell
本文介绍了html表格可编辑单元格的更新和重置功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
/*使用asp.net，从MS sql server 2005绑定html表和数据，并将其设置为可编辑状态.也就是说，如果我单击Employee id行，它将变为可编辑状态，因此我更改Eid(Employee id)和备注"行，我可以在此之后选择任意1，如果我单击"update.if"，则应在Id coulmn和备注"列中输入应保存在html和sql服务器中的内容.如果单击重置"，则旧值仍应使用javascript保留.请为这两个按钮提供功能.*/
/*这是我的代码*/
/*using asp.net,i''d html table and data was binded from MS sql server 2005 and i made it as editable.That is if i clicked the row Employee id it get editable so i change Eid(Employee id) and Remarks row i can select any 1 after this what i entered in the Id coulmn and remark column that should be save in html as well as in sql server if i click update.if click reset the old value shouls remain using javascript.Pls need function for those 2 buttons.*/
/*This is my code*/
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>Editable Column Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<title>Html Image Pgm</title>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default3.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
$("#tbDetails").append(
"<tr><td onDblClick='javascript:changeContent(this);'>" + data.d[i].Eid +
"</td><td>" + data.d[i].Ename +
"</td><td>" + data.d[i].Edesgn +
"</td><td>" + data.d[i].Esalary +
"</td><td><select id='#Rem'><option value='Outstanding'>Outstanding</option><option value='Marvellous'>Marvellous</option><option value='Perfection'>Perfection</option><option value='Talented'>Talented</option><option value='Best Team'>Best Team</option><option value='Intelligent'>Intelligent</option><option value='Bravo'>Bravo</option><option value='Pretty'>Pretty</option><option value='Poor'>Poor</option></select>"+
"</td></tr>");
}
},
error: function(result) {
alert("Error");
}
});
});
</script>
<script type="text/javascript">
function changeContent(tablecell) {
//alert(tablecell.firstChild.nodeValue);
tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\"" + tablecell.innerHTML + "\">";
tablecell.firstChild.focus();
}
function submitNewName(textfield) {
//alert(textfield.value);
textfield.parentNode.innerHTML = textfield.value;
newvalue = textfield.value;
// alert(newvalue);
}
function update() {
var table=document.getElementById('tbDetails');
var rcount = table.rows.length;
queue.innerHTML += table.rows[rcount - 1].cells[1].innerText;
}
</script>
<style type="text/css">
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<form>
<table id="tbDetails" cellpadding="0" cellspacing="0">
<thead style="background-color:#DC5807; color:White; font-weight:bold">
<tr style="border:solid 1px #000000">
<th>Eid</th>
<th>Ename</th>
<th>Edesgn</th>
<th>Esalary</th>
<th>Remarks</th>
</tr>
</thead>
</table>
<!-- <script type="text/javascript" src="jquery/getdropdownvalue.js" >
$(document).ready(function() {
$("#Rem").change(function() {
var trial = $("Rem option:selected").text();
alert(trial);
});
});
</script>-->
<input id="Button1" type="button" value="Update" />
<input id="Button2" type="reset" value="Reset" />
</form>
</body>
</html>
/*后面的代码*/
/*code behind*/
Imports System.Web.Services
Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Partial Class Default3
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
<webmethod()> _
Public Shared Function BindDatatable() As EmpDetails()
Dim dt As New DataTable()
Dim details As New List(Of EmpDetails)()
Using con As New SqlConnection("Data Source=WINXSER4\MSSQL05;Initial Catalog=Emp-DB;User ID=gowri103;Password=Senthil10@")
Using cmd As New SqlCommand("select * from employee", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
For Each dtrow As DataRow In dt.Rows
Dim emp As New EmpDetails()
emp.Eid = dtrow("Eid").ToString()
emp.Ename = dtrow("Ename").ToString()
emp.Edesgn = dtrow("Edesgn").ToString()
emp.Esalary = dtrow("Esalary").ToString()
emp.Remarks = dtrow("Remarks").ToString()
details.Add(emp)
Next
End Using
End Using
Return details.ToArray()
End Function
'Public Sub update()
' Dim dt As New DataTable()
' Using con As New SqlConnection("Data Source=WINXSER4\MSSQL05;Initial Catalog=Emp-DB;User ID=gowri103;Password=Senthil10@")
' Using cmd As New SqlCommand("select * from e
' End Using
'End Sub
Public Class EmpDetails
Public Property Eid() As String
Get
Return e_Eid
End Get
Set(ByVal value As String)
e_Eid = value
End Set
End Property
Private e_Eid As String
Public Property Ename() As String
Get
Return e_Ename
End Get
Set(ByVal value As String)
e_Ename = value
End Set
End Property
Private e_Ename As String
Public Property Edesgn() As String
Get
Return e_Edesgn
End Get
Set(ByVal value As String)
e_Edesgn = value
End Set
End Property
Private e_Edesgn As String
Public Property Esalary() As String
Get
Return e_Esalary
End Get
Set(ByVal value As String)
e_Esalary = value
End Set
End Property
Private e_Esalary As String
Public Property Remarks() As String
Get
Return e_Remarks
End Get
Set(ByVal value As String)
e_Remarks = value
End Set
End Property
Private e_Remarks As String
End Class
End Class
推荐答案
(文档).ready(功能(){
(document).ready(function() {
.ajax({ 类型:" ， contentType:" ， url:" ， 数据:" ， dataType:" ， 成功:功能(数据){ for ( var i = 0 ; i < data.d.length; i ++){
.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Default3.aspx/BindDatatable", data: "{}", dataType: "json", success: function(data) { for (var i = 0; i < data.d.length; i++) {
(" ).append( " + data.d [i] .Eid + " + data.d [i] .Ename + " + data.d [i] .Edesgn + " + data.d [i]. " + " )； } }， 错误:功能(结果){ alert(" )； } }); }); < / 脚本 > < 脚本 =" 文本/javascript" 函数 changeContent(tablecell){ // 警报(tablecell.firstChild.nodeValue)； tablecell.innerHTML = " + tablecell.innerHTML + \>" ; tablecell.firstChild.focus(); } 函数 SubmitNewName(textfield){ // 警报(textfield.value)； textfield.parentNode.innerHTML = textfield.value; newvalue = textfield.value; // alert(newvalue); } 功能 update(){ var table = 文档 .getElementById(' tbDetails')； var rcount = table.rows.length; queue.innerHTML + = table.rows [rcount- 1 ].cells [ 1 ].innerText; } < / 脚本 > < 样式 =" text/css" 表，第， td { 边框 : 1像素纯黑色； 边界崩溃 : 崩溃； } </ 样式 > < /head > < 正文 > < 表单 > < 表 =" tbDetails" cellpadding > 0" 单元格间距 =" 0" < thead =" < tr =" > < th > Eid < /th > < 第 > Ename < /th > < th > Edesgn < /th > < th > Esalary < /th > < th > 备注< /th > < /tr > < /thead > < /table > <！- < script type ="text/javascript" src ="jquery/getdropdownvalue.js">
("#tbDetails").append( "<tr><td onDblClick='javascript:changeContent(this);'>" + data.d[i].Eid + "</td><td>" + data.d[i].Ename + "</td><td>" + data.d[i].Edesgn + "</td><td>" + data.d[i].Esalary + "</td><td><select id='#Rem'><option value='Outstanding'>Outstanding</option><option value='Marvellous'>Marvellous</option><option value='Perfection'>Perfection</option><option value='Talented'>Talented</option><option value='Best Team'>Best Team</option><option value='Intelligent'>Intelligent</option><option value='Bravo'>Bravo</option><option value='Pretty'>Pretty</option><option value='Poor'>Poor</option></select>"+ "</td></tr>"); } }, error: function(result) { alert("Error"); } }); }); </script> <script type="text/javascript"> function changeContent(tablecell) { //alert(tablecell.firstChild.nodeValue); tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\"" + tablecell.innerHTML + "\">"; tablecell.firstChild.focus(); } function submitNewName(textfield) { //alert(textfield.value); textfield.parentNode.innerHTML = textfield.value; newvalue = textfield.value; // alert(newvalue); } function update() { var table=document.getElementById('tbDetails'); var rcount = table.rows.length; queue.innerHTML += table.rows[rcount - 1].cells[1].innerText; } </script> <style type="text/css"> table,th,td { border:1px solid black; border-collapse:collapse; } </style> </head> <body> <form> <table id="tbDetails" cellpadding="0" cellspacing="0"> <thead style="background-color:#DC5807; color:White; font-weight:bold"> <tr style="border:solid 1px #000000"> <th>Eid</th> <th>Ename</th> <th>Edesgn</th> <th>Esalary</th> <th>Remarks</th> </tr> </thead> </table> <!-- <script type="text/javascript" src="jquery/getdropdownvalue.js" >
这篇关于html表格可编辑单元格的更新和重置功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
