js+Html to realize table editable operation
|
This article shares the specific code of js+Html to realize the editable operation of the table for your reference. The specific content is as follows Function description: Click the page to make the cell td editable. After entering the content, when the cell loses focus, the entered content is saved.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Edit table data</title>
<style type="text/css">
<!--
body,div,p,ul,li,font,span,td,th{
font-size:10pt;
line-height:155%;
}
table{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}
td{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
.EditCell_TextBox {
width: 90%;
border:1px solid #0099CC;
}
.EditCell_DropDownList {
width: 90%;
}
-->
</style>
<script>
/**
* JS implements editable tables * Usage: EditTables(tb1,tb2,tb2,......);
**/
//Set multiple tables to edit function EditTables(){
for(var i=0;i<arguments.length;i++){
SetTableCanEdit(arguments[i]);
}
}
//Set the table to be editable function SetTableCanEdit(table){
for(var i=1; i<table.rows.length;i++){
SetRowCanEdit(table.rows[i]);
}
}
function SetRowCanEdit(row){
for(var j=0;j<row.cells.length; j++){
//If the current cell specifies the edit type, editing is allowed var editType = row.cells[j].getAttribute("EditType");
if(!editType){
//If the current cell is not specified, check whether the current column specifies editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");
}
if(editType){
row.cells[j].onclick = function (){
EditCell(this);
}
}
}
}
//Set the specified cell to editable function EditCell(element, editType){
var editType = element.getAttribute("EditType");
if(!editType){
//If the current cell is not specified, check whether the current column specifies editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");
}
switch(editType){
case "TextBox":
CreateTextBox(element, element.innerHTML);
break;
case "DropDownList":
CreateDropDownList(element);
break;
default:
break;
}
}
//Create an editable input box for the cell function CreateTextBox(element, value){
// Check the edit state, if it is already in edit state, skip var editState = element.getAttribute("EditState");
if(editState != "true"){
//Create a text box var textBox = document.createElement("INPUT");
textBox.type = "text";
textBox.className="EditCell_TextBox";
//Set the current value of the text box if (! value) {
value = element.getAttribute("Value");
}
textBox.value = value;
//Set the text box's focus loss event textBox.onblur = function () {
CancelEditCell(this.parentNode, this.value);
}
//Add a text box to the current cell ClearChild(element);
element.appendChild(textBox);
textBox.focus();
textBox.select();
//Change the state variable element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);
}
}
//Create a selection box for the cell function CreateDropDownList(element, value){
// Check the edit state, if it is already in edit state, skip var editState = element.getAttribute("EditState");
if(editState != "true"){
//Create the lower frame var downList = document.createElement("Select");
downList.className="EditCell_DropDownList";
//Add list items var items = element.getAttribute("DataItems");
if(!items){
items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
}
if(items){
items = eval("[" + items + "]");
for(var i=0; i<items.length; i++){
var oOption = document.createElement("OPTION");
oOption.text = items[i].text;
oOption.value = items[i].value;
downList.options.add(oOption);
}
}
//Set the current value of the list if (! value) {
value = element.getAttribute("Value");
}
downList.value = value;
//Set the focus loss event of the next frame downList.onblur = function (){
CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);
}
//Add a lower frame to the current cell ClearChild(element);
element.appendChild(downList);
downList.focus();
//Record state changes element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
}
}
//Cancel cell editing function CancelEditCell(element, value, text){
element.setAttribute("Value", value);
if(text){
element.innerHTML = text;
}else{
element.innerHTML = value;
}
element.setAttribute("EditState", "false");
//Check if there is a formula calculation CheckExpression(element.parentNode);
}
// Clear all child nodes of the specified object function ClearChild(element) {
element.innerHTML = "";
}
//Add row function AddRow(table, index){
var lastRow = table.rows[table.rows.length-1];
var newRow = lastRow.cloneNode(true);
//To calculate the serial number of the newly added row, you need to import the jQuery jar package var startIndex = $.inArray(lastRow,table.rows);
var endIndex = table.rows;
table.tBodies[0].appendChild(newRow);
newRow.cells[0].innerHTML=endIndex-startIndex;
SetRowCanEdit(newRow);
return newRow;
}
//Delete row function DeleteRow(table, index){
for(var i=table.rows.length - 1; i>0;i--){
var chkOrder = table.rows[i].cells[0].firstChild;
if(chkOrder){
if(chkOrder.type = "CHECKBOX"){
if(chkOrder.checked){
//Execute deletion table.deleteRow(i);
}
}
}
}
}
//Extract the value of the table, JSON format function GetTableData(table){
var tableData = new Array();
alert("Number of rows: " + table.rows.length);
for(var i=1; i<table.rows.length;i++){
tableData.push(GetRowData(tabProduct.rows[i]));
}
return tableData;
}
//Extract the data of the specified row in JSON format function GetRowData(row){
var rowData = {};
for(var j=0;j<row.cells.length; j++){
name = row.parentNode.rows[0].cells[j].getAttribute("Name");
if(name){
var value = row.cells[j].getAttribute("Value");
if(!value){
value = row.cells[j].innerHTML;
}
rowData[name] = value;
}
}
//alert("ProductName:" + rowData.ProductName);
//Or like this: alert("ProductName:" + rowData["ProductName"]);
return rowData;
}
// Check the fields that need to be run in the current data row function CheckExpression(row){
for(var j=0;j<row.cells.length; j++){
expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");
//If the formula is specified, calculation is required if (expn) {
var result = Expression(row,expn);
var format = row.parentNode.rows[0].cells[j].getAttribute("Format");
if(format){
//If the format is specified, format the text value row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);
}else{
row.cells[j].innerHTML = Expression(row,expn);
}
}
}
}
//Calculate the fields that need to be calculated function Expression(row, expn){
var rowData = GetRowData(row);
//Loop value calculation for(var j=0;j<row.cells.length; j++){
name = row.parentNode.rows[0].cells[j].getAttribute("Name");
if(name){
var reg = new RegExp(name, "i");
expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));
}
}
return eval(expn);
}
///
/**
* Formatting number display mode * Usage * formatNumber(12345.999,'#,##0.00');
* formatNumber(12345.999,'#,##0.##');
* formatNumber(123,'000000');
* @param num
* @param pattern
*/
/* The following is an example formatNumber('','')=0
formatNumber(123456789012.129,null)=123456789012
formatNumber(null,null)=0
formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12
formatNumber(123456789012.129,'#0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#0.##')=123,456,789,012.12
formatNumber(12.129,'0.00')=12.12
formatNumber(12.129,'0.##')=12.12
formatNumber(12,'00000')=00012
formatNumber(12,'#.##')=12
formatNumber(12,'#.00')=12.00
formatNumber(0,'#.##')=0
*/
function formatNumber(num,pattern){
var strarr = num?num.toString().split('.'):['0'];
var fmtarr = pattern?pattern.split('.'):[''];
var retstr='';
// integer part var str = strarr[0];
var fmt = fmtarr[0];
var i = str.length-1;
var comma = false;
for(var f=fmt.length-1;f>=0;f--){
switch(fmt.substr(f,1)){
case '#':
if(i>=0 ) retstr = str.substr(i--,1) + retstr;
break;
case '0':
if(i>=0) retstr = str.substr(i--,1) + retstr;
else retstr = '0' + retstr;
break;
case ',':
comma = true;
retstr=','+retstr;
break;
}
}
if(i>=0){
if(comma){
var l = str.length;
for(;i>=0;i--){
retstr = str.substr(i,1) + retstr;
if(i>0 && ((li)%3)==0) retstr = ',' + retstr;
}
}
else retstr = str.substr(0,i+1) + retstr;
}
retstr = retstr+'.';
// Process the decimal part str=strarr.length>1?strarr[1]:'';
fmt=fmtarr.length>1?fmtarr[1]:'';
i=0;
for(var f=0;f<fmt.length;f++){
switch(fmt.substr(f,1)){
case '#':
if(i<str.length) retstr+=str.substr(i++,1);
break;
case '0':
if(i<str.length) retstr+= str.substr(i++,1);
else retstr+='0';
break;
}
}
return retstr.replace(/^,+/,'').replace(/\.$/,'');
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<h3>Editable table</h3>
<table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
<tr>
<td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">Serial number</td>
<td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">Product Name</td>
<td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">Quantity</td>
<td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">Unit Price</td>
<td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">Total</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF" Value="c">C</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>
<td bgcolor="#FFFFFF">2</td>
<td bgcolor="#FFFFFF" Value="d">D</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr>
</table>
<br />
<input type="button" name="Submit" value="Add" onclick="AddRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit2" value="Delete" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit22" value="Reset" onclick="window.location.reload()" />
<input type="submit" name="Submit3" value="Submit" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
</form>
<script language="javascript" src="GridEdit.js"></script>
<script language="javascript">
var tabProduct = document.getElementById("tabProduct");
// Set the table to be editable // You can set multiple at a time, for example: EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);
</script>
</body>
</html>The effect is as follows:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to build php+nginx+swoole+mysql+redis environment with docker
>>: MySQL startup error 1067 and invalid recovery after changing character set and restarting
Recommend
WeChat applet scroll-view realizes left-right linkage effect
WeChat applet uses scroll-view to achieve left-ri...
Error mysql Table 'performance_schema...Solution
The test environment is set up with a mariadb 5.7...
mysql group by grouping multiple fields
In daily development tasks, we often use MYSQL...
Mysql join table and id auto-increment example analysis
How to write join If you use left join, is the ta...
MySQL lock control concurrency method
Table of contents Preface 1. Optimistic Locking A...
Design theory: On the issues of scheme, resources and communication
<br />This problem does not exist in many sm...
6 inheritance methods of JS advanced ES6
Table of contents 1. Prototype chain inheritance ...
React.js framework Redux basic case detailed explanation
react.js framework Redux https://github.com/react...
Two types of tab applications in web design
Nowadays, tabs are widely used in web design, but...
WeChat applet scroll-view realizes left and right linkage
This article shares the specific code for WeChat ...
Detailed explanation of the configuration method of MySQL master-slave replication read-write separation
1. Description Earlier we talked about the instal...
How to set up URL link in Nginx server
For websites with an architecture like LNMP, they...
How to install and uninstall IIS7 components using the WIN2008 server command line
Note: Since .NET FrameWork cannot be run in core ...
Two practical ways to enable proxy in React
Two ways to enable proxy React does not have enca...
Implementation example of specifying container ip when creating a container in docker
When Docker creates a container, it uses the brid...