Automatic Edit and save Action in a Html Table

bysantosh •
0

In this article, I will share with you convenient tips about ASP.NET . Let's suppose you want to provide edit functionality to the user like when the user clicks on the cell it changes to edit mode and leave its save the data.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Inlineedit.aspx.cs"
 Inherits="Inlineedit" %>

<!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 runat="server">
   <title>Untitled Page</title>

   <script language='javascript'>

function editCell(C)
{
 document.getElementById("txt" + C).style.display="block";
 document.getElementById("txt" + C).value =
document.getElementById("span" + C).value;
 document.getElementById("span" + C).style.display="none";
}

function updateCell(C)
{
 document.getElementById("span" + C).style.display="block";
 document.getElementById("span" + C).value =
document.getElementById("txt" + C).value;
 document.getElementById("span" + C).innerText=
document.getElementById("span" + C).value;
 document.getElementById("txt" + C).style.display="none";
}

   </script>

</head>
<body>
   <form id="form1" runat="server">
       <div>
           <table>
               <tr>
                   <td>
            <span id='span1' onclick='editCell("1");'
value='This is some value'>This is some value</span>
            <input type='text' id='txt1' onblur='updateCell("1");'
value='' style='display: none;'>
                   </td>
               </tr>
           </table>
       </div>
   </form>
</body>
</html>
Tags:

Please do not post any spam link in the comment box😊

إرسال تعليق (0)
أحدث أقدم