`

js+css实现动态删除表格行、列、双击编辑

 
阅读更多
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态删除表格</title>
<style>
body{
	FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;
}
input {
	FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default;
}
table{
	font-size: 9pt;
	word-break:break-all;
	cursor: default;
	BORDER: black 1px solid;
	background-color:#eeeecc;
	border-collapse:collapse;
	border-Color:#999999;
	align:center;
}
</style>
<script language="JavaScript">
var Main_Tab= null;
var cur_row	= null;
var cur_col	= null;
var cur_cell	= null;
var Org_con	= "";
var sort_col	= null;

var show_col	= false;
var charMode= true;
var act_bgc	= "#BEC5DE";
var act_fc	= "black";
var cur_bgc	= "#ccffcc";
var cur_fc	= "black";

function init(){
	cur_row= null;
	cur_col= null;
	cur_cell= null;
	sort_col= null;
	Main_Tab = PowerTable;
	read_def(Main_Tab)
	Main_Tab.onmouseover= overIt;
	Main_Tab.onmouseout= outIt;
	Main_Tab.onclick= clickIt;
	Main_Tab.ondblclick= dblclickIt;
	Org_con= Main_Tab.outerHTML;
	arrowUp = document.createElement("SPAN");
	arrowUp.innerHTML= "5";
	arrowUp.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
	arrowDown = document.createElement("SPAN");
	arrowDown.innerHTML	= "6";
	arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
}
function window.onload(){
	init();
	/*www.codefans.net*/
	drag = document.createElement("DIV");
	drag.innerHTML= "";
	drag.style.textAlign 	= "center";
	drag.style.position 	= "absolute";
	drag.style.cursor 	= "hand";
	drag.style.border 	= "1 solid black";
	drag.style.display 	= "none";
	drag.style.zIndex 	= "999";
	
	document.body.insertBefore(drag);
	setInterval("judge_move()",100);
	setInterval("showContent.value=Main_Tab.innerHTML;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col",1000);
}

function judge_move(){
	move[0].disabled=(cur_row == null || cur_row<=1);
	move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0);
	move[2].disabled=(cur_col == null || cur_col==0);
	move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1);
}

document.onselectstart	= function(){return false;}
document.onmouseup	= drag_end;
function clear_color(){
	the_table=Main_Tab;
	if(cur_col!=null){
		for(i=0;i<the_table.rows.length;i++){
			with(the_table.rows[i].cells[cur_col]){
				style.backgroundColor=oBgc;
				style.color=oFc;
			}
		}
	}
	if(cur_row!=null){
		for(i=0;i<the_table.rows[cur_row].cells.length;i++){
			with(the_table.rows[cur_row].cells[i]){
				style.backgroundColor=oBgc;
				style.color=oFc;
			}
		}
	}
	if(cur_cell!=null){
		cur_cell.children[0].contentEditable = false;
		with(cur_cell.children[0].runtimeStyle){
			borderLeft=borderTop="";
			borderRight=borderBottom="";
			backgroundColor="";
			paddingLeft="";
			textAlign="";
		}
	}
}

function document.onclick(){
	window.status = "";
	clear_color();
	cur_row  = null;
	cur_col  = null;
	cur_cell = null;
}

function read_def(the_table){
	for(var i=0;i<the_table.rows.length;i++){
		for(var j=0;j<the_table.rows[i].cells.length;j++){
			with(the_table.rows[i]){
				cells[j].oBgc = cells[j].currentStyle.backgroundColor;
				cells[j].oFc  = cells[j].currentStyle.color;
				if(i==0){
					cells[j].onmousedown	= drag_start;
					cells[j].onmouseup	= drag_end;
				}
			}
		}
	}
}

function get_Element(the_ele,the_tag){
	the_tag = the_tag.toLowerCase();
	if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
	while(the_ele=the_ele.offsetParent){
		if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
	}
	return(null);
}

var dragStart		= false;
var dragColStart	= null;
var dragColEnd		= null;

function drag_start(){
	var the_td	= get_Element(event.srcElement,"td");
	if(the_td==null) return;
	dragStart	= true;
	dragColStart	= the_td.cellIndex;
	drag.style.width	= the_td.offsetWidth;
	drag.style.height	= the_td.offsetHeight;
	function document.onmousemove(){
		drag.style.display	= "";
		drag.style.top		= event.y - drag.offsetHeight/2;
		drag.style.left		= event.x - drag.offsetWidth/2;
		for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
			with(Main_Tab.rows[0].cells[i]){
				if((event.y>offsetTop+parseInt(document.body.currentStyle.marginTop)  &&  event.y<offsetTop+offsetHeight+parseInt(document.body.currentStyle.marginTop))  &&  (event.x>offsetLeft+parseInt(document.body.currentStyle.marginLeft)  &&  event.x<offsetLeft+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){
					runtimeStyle.backgroundColor=act_bgc;
					dragColEnd=cellIndex;
				}else{
					runtimeStyle.backgroundColor="";
				}
			}
		}
		if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.body.currentStyle.marginTop)  &&  event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.body.currentStyle.marginTop))) dragColEnd=null;
	}
	drag.innerHTML = the_td.innerHTML;
	drag.style.backgroundColor = the_td.oBgc;
	drag.style.color = the_td.oFc;
}

function drag_end(){
	dragStart = false;
	drag.style.display="none";
	drag.innerHTML = "";
	drag.style.width = 0;
	drag.style.height = 0;
	for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
		Main_Tab.rows[0].cells[i].runtimeStyle.backgroundColor="";
	}
	if(dragColStart!=null  &&  dragColEnd!=null  &&  dragColStart!=dragColEnd){
		change_col(Main_Tab,dragColStart,dragColEnd);
		if(dragColStart==sort_col)sort_col=dragColEnd;
		else if(dragColEnd==sort_col)sort_col=dragColStart;
		document.onclick();
	}
	dragColStart = null;
	dragColEnd = null;
	document.onmousemove=null;
}

function clickIt(){
	event.cancelBubble=true;
	var the_obj = event.srcElement;
	var i = 0 ,j = 0;
	if(cur_cell!=null  &&  cur_row!=0){
		cur_cell.children[0].contentEditable = false;
		with(cur_cell.children[0].runtimeStyle){
			borderLeft=borderTop="";
			borderRight=borderBottom="";
			backgroundColor="";
			paddingLeft="";
			textAlign="";
		}
	}
	if(the_obj.tagName.toLowerCase() != "table"  &&  the_obj.tagName.toLowerCase() != "tbody"  &&  the_obj.tagName.toLowerCase() != "tr"){
		var the_td	= get_Element(the_obj,"td");
		if(the_td==null) return;
		var the_tr	= the_td.parentElement;
		var the_table	= get_Element(the_td,"table");
		var i 		= 0;
		clear_color();
		cur_row = the_tr.rowIndex;
		cur_col = the_td.cellIndex;
		if(cur_row!=0){
			for(i=0;i<the_tr.cells.length;i++){
				with(the_tr.cells[i]){
					style.backgroundColor=cur_bgc;
					style.color=cur_fc;
				}
			}
		}else{
			if(show_col){
				for(i=1;i<the_table.rows.length;i++){
					with(the_table.rows[i].cells[cur_col]){
						style.backgroundColor=cur_bgc;
						style.color=cur_fc;
					}
				}
			}
			
			the_td.mode = !the_td.mode;
			if(sort_col!=null){
				with(the_table.rows[0].cells[sort_col])
					removeChild(lastChild);
			}
			with(the_table.rows[0].cells[cur_col])
				appendChild(the_td.mode?arrowUp:arrowDown);
			sort_tab(the_table,cur_col,the_td.mode);
			sort_col=cur_col;
		}
	}
}

function dblclickIt(){
	event.cancelBubble=true;
	if(cur_row!=0){
		var the_obj = event.srcElement;
		if(the_obj.tagName.toLowerCase() != "table"  &&  the_obj.tagName.toLowerCase() != "tbody"  &&  the_obj.tagName.toLowerCase() != "tr"){
			var the_td	= get_Element(the_obj,"td");
			if(the_td==null) return;
			cur_cell	= the_td;
			if(the_td.children.length!=1)
				the_td.innerHTML="<div>" + the_td.innerHTML + "</div>";
			else if(the_td.children.length==1  &&  the_td.children[0].tagName.toLowerCase()!="div")
				the_td.innerHTML="<div>" + the_td.innerHTML + "</div>";
			cur_cell.children[0].contentEditable = true;
			with(cur_cell.children[0].runtimeStyle){
				borderRight=borderBottom="buttonhighlight 1px solid";
				borderLeft=borderTop="black 1px solid";
				backgroundColor="#dddddd";
				paddingLeft="5px";
				//textAlign="center";
			}
		}
	}
}

function overIt(){
	if(dragStart)return;
	var the_obj = event.srcElement;
	var i = 0;
	if(the_obj.tagName.toLowerCase() != "table"){
		var the_td	= get_Element(the_obj,"td");
		if(the_td==null) return;
		var the_tr	= the_td.parentElement;
		var the_table	= get_Element(the_td,"table");
		if(the_tr.rowIndex!=0){
			for(i=0;i<the_tr.cells.length;i++){
				with(the_tr.cells[i]){
					runtimeStyle.backgroundColor=act_bgc;
					runtimeStyle.color=act_fc;					
				}
			}
		}else{
			for(i=1;i<the_table.rows.length;i++){
				with(the_table.rows[i].cells(the_td.cellIndex)){
					runtimeStyle.backgroundColor=act_bgc;
					runtimeStyle.color=act_fc;
				}
			}
			if(the_td.mode==undefined)the_td.mode = false;
			the_td.style.cursor=the_td.mode?"n-resize":"s-resize";
		}
	}
}

function outIt(){
	var the_obj = event.srcElement;
	var i=0;
	if(the_obj.tagName.toLowerCase() != "table"){
		var the_td	= get_Element(the_obj,"td");
		if(the_td==null) return;
		var the_tr	= the_td.parentElement;
		var the_table	= get_Element(the_td,"table");
		if(the_tr.rowIndex!=0){
			for(i=0;i<the_tr.cells.length;i++){
				with(the_tr.cells[i]){
					runtimeStyle.backgroundColor='';
					runtimeStyle.color='';				
				}
			}
		}else{
			var the_table=the_tr.parentElement.parentElement;
			for(i=0;i<the_table.rows.length;i++){
				with(the_table.rows[i].cells(the_td.cellIndex)){
					runtimeStyle.backgroundColor='';
					runtimeStyle.color='';
				}
			}
		}
	}
}

var charPYStr = "";
function judge_CN(char1,char2,mode){
	var charSet=charMode?charPYStr:charBHStr;
	for(var n=0;n<(char1.length>char2.length?char1.length:char2.length);n++){
		if(char1.charAt(n)!=char2.charAt(n)){
			if(mode) return(charSet.indexOf(char1.charAt(n))>charSet.indexOf(char2.charAt(n))?1:-1);
			else	 return(charSet.indexOf(char1.charAt(n))<charSet.indexOf(char2.charAt(n))?1:-1);
			break;
		}
	}
	return(0);
}

function sort_tab(the_tab,col,mode){
	var tab_arr = new Array();
	var i;
	var start=new Date;
	for(i=1;i<the_tab.rows.length;i++){
		tab_arr.push(new Array(the_tab.rows[i].cells[col].innerText.toLowerCase(),the_tab.rows[i]));
	}
	function SortArr(mode) {
		return function (arr1, arr2){
			var flag;
			var a,b;
			a = arr1[0];
			b = arr2[0];
			if(/^(\+|-)?\d+($|\.\d+$)/.test(a)  &&  /^(\+|-)?\d+($|\.\d+$)/.test(b)){
				a=eval(a);
				b=eval(b);
				flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
			}else{
				a=a.toString();
				b=b.toString();
				if(a.charCodeAt(0)>=19968  &&  b.charCodeAt(0)>=19968){
					flag = judge_CN(a,b,mode);
				}else{
					flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
				}
			}
			return flag;
		};
	}
	tab_arr.sort(SortArr(mode));

	for(i=0;i<tab_arr.length;i++){
		the_tab.lastChild.appendChild(tab_arr[i][1]);
	}

	window.status = " (Time spent: " + (new Date - start) + "ms)";
}

function change_row(the_tab,line1,line2){
	the_tab.rows[line1].swapNode(the_tab.rows[line2])
}

function change_col(the_tab,line1,line2){
	for(var i=0;i<the_tab.rows.length;i++)
		the_tab.rows[i].cells[line1].swapNode(the_tab.rows[i].cells[line2]);
}

function Move_up(the_table){
	event.cancelBubble=true;
	if(cur_row==null || cur_row<=1)return;
	change_row(the_table,cur_row,--cur_row);
}

function Move_down(the_table){
	event.cancelBubble=true;
	if(cur_row==null || cur_row==the_table.rows.length-1 || cur_row==0)return;
	change_row(the_table,cur_row,++cur_row);
}

function Move_left(the_table){
	event.cancelBubble=true;
	if(cur_col==null || cur_col==0)return;
	change_col(the_table,cur_col,--cur_col);
	if(cur_col==sort_col)sort_col=cur_col+1;
	else if(cur_col+1==sort_col)sort_col=cur_col;
}

function Move_right(the_table){
	event.cancelBubble=true;
	if(cur_col==null || cur_col==the_table.rows[0].cells.length-1)return;
	change_col(the_table,cur_col,++cur_col);
	if(cur_col==sort_col)sort_col=cur_col-1;
	else if(cur_col-1==sort_col)sort_col=cur_col;
}

function add_row(the_table) {
	event.cancelBubble=true;
	var the_row,the_cell;
	the_row = cur_row==null?-1:(cur_row+1);
	clear_color();
	var newrow=the_table.insertRow(the_row);
	for (var i=0;i<the_table.rows[0].cells.length;i++) {
		the_cell=newrow.insertCell(i);
		the_cell.innerText="NewRow_" + the_cell.parentElement.rowIndex;
	}
	read_def(the_table);
}

function del_row(the_table) {
	if(the_table.rows.length==1) return;
	var the_row;
	the_row = (cur_row==null || cur_row==0)?-1:cur_row;
	the_table.deleteRow(the_row);
	cur_row = null;
	cur_cell=null;
}

function add_col(the_table) {
	event.cancelBubble=true;
	var the_col,i,the_cell;
	the_col = cur_col==null?-1:(cur_col+1);
	var the_title=prompt("Please input the title: ","Untitled");
	if(the_title==null)return;
	if(the_col!=-1  &&  the_col<=sort_col  &&  sort_col!=null)sort_col++;
	the_title=the_title==""?"Untitled":the_title
	clear_color();
	for(var i=0;i<the_table.rows.length;i++){
		the_cell=the_table.rows[i].insertCell(the_col);
		the_cell.innerText=i==0?the_title:("NewCol_" + the_cell.cellIndex);
	}
	read_def(the_table);
}

function del_col(the_table) {
	if(the_table.rows[0].cells.length==1) return;
	var the_col,the_cell;
	the_col = cur_col==null?(the_table.rows[0].cells.length-1):cur_col;
	if(the_col!=-1  &&  the_col<sort_col  &&  sort_col!=null)sort_col--;
	else if(the_col==sort_col)sort_col=null;
	for(var i=0;i<the_table.rows.length;i++) the_table.rows[i].deleteCell(the_col);
	cur_col = null;
	cur_cell=null;
}

function res_tab(the_table){
	the_table.outerHTML=Org_con;
	init();
}

function exp_tab(the_table){
	var the_content="";
	document.onclick();
	the_content=the_table.outerHTML;
	the_content=the_content.replace(/ style=\"[^\"]*\"/g,"");
	the_content=the_content.replace(/ mode=\"(false|true)"/g,"");
	the_content=the_content.replace(/ oBgc=\"[\w#\d]*\"/g,"");
	the_content=the_content.replace(/ oFc=\"[\w#\d]*\"/g,"");
	the_content=the_content.replace(/<DIV contentEditable=false>([^<]*)<\/DIV>/ig,"$1");
	the_content="<style>table{font-size: 9pt;word-break:break-all;cursor: default;BORDER: black 1px solid;background-color:#eeeecc;border-collapse:collapse;border-Color:#999999;align:center;}</style>\n"+the_content;
	var newwin=window.open("about:blank","_blank","");
	newwin.document.open();
	newwin.document.write(the_content);
	newwin.document.close();
	newwin=null;
}
</script>
<TABLE width=100% border=1 cellSpacing=0 cellPadding=2 id="PowerTable">
<TR align=middle bgColor=#ffcc00>
<TD>First Name</TD>
<TD>Last Name</TD>
<TD>Team</TD>
<TD>Engine</TD>
<TD>Tyres</TD>
<TD>Fastest Lap</TD>
<TD>国家</TD></TR>
<TR>
<TD>Juan-Pablo</TD>
<TD>Montoya</TD>
<TD>Williams</TD>
<TD>BMW</TD>
<TD>Michelin</TD>
<TD>1.17.123</TD>
<TD>柬埔寨</TD></TR>
<TR>
<TD>David</TD>
<TD>Coulthard</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.423</TD>
<TD>泰国</TD></TR>
<TR>
<TD>Mika</TD>
<TD>Hakkinen</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.979</TD>
<TD>越南</TD></TR>
<TR>
<TD>Jarno</TD>
<TD>Trulli</TD>
<TD>Jordan</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.16.459</TD>
<TD>菲律宾</TD></TR>
<TR>
<TD>Ricardo</TD>
<TD>Zonta</TD>
<TD>Jordan</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.17.328</TD>
<TD>英国</TD></TR>
<TR>
<TD>Gloria</TD>
<TD>Slap</TD>
<TD>Lotus</TD>
<TD>Renault</TD>
<TD>Michelin</TD>
<TD>1.15.012</TD>
<TD>日本</TD></TR>
</TABLE>

<input type=button value=ins_row onclick=add_row(Main_Tab)>
<input type=button value=ins_col onclick=add_col(Main_Tab)>
<input type=button value=Del_row onclick=del_row(Main_Tab)>
<input type=button value=Del_col onclick=del_col(Main_Tab)>
<input type=button value=Restore onclick=res_tab(Main_Tab)>
<input type=button value=Export  onclick=exp_tab(Main_Tab)>
 ( Move: 
<input type=button id=move value=Up    onclick=Move_up(Main_Tab)>
<input type=button id=move value=Down  onclick=Move_down(Main_Tab)>
<input type=button id=move value=Left  onclick=Move_left(Main_Tab)>
<input type=button id=move value=Right onclick=Move_right(Main_Tab)> )

<span style="cursor:hand; color: red; text-Decoration: underline" onclick="if(detail.style.display==''){detail.style.display='none';this.innerText='Show Detail'}else{detail.style.display='';this.innerText='Hide Detail'}">Show Detail</span>
<div id=detail style="display:none">
<input type=text id=monitor size=30 style="width:200px">
<textarea id=showContent cols=100 rows=20>
分享到:
评论

相关推荐

    html+css+js表格动态增删改与xml加载与保存

    在本项目"html+css+js表格动态增删改与xml加载与保存"中,我们将深入探讨如何利用这些技术实现一个功能丰富的表格应用。 首先,HTML(HyperText Markup Language)用于定义页面的基本结构。在创建动态表格时,我们...

    动态删除表格行、列、双击编辑.rar

    "动态删除表格行、列、双击编辑"的主题涉及到JavaScript编程、HTML和CSS等技术的应用,旨在实现用户交互性强、灵活多变的表格功能。下面将详细介绍这些知识点。 首先,动态删除表格行和列是Web应用中增强用户体验的...

    javascript+css仿excel表格效果

    3. **事件监听**:设置`addEventListener()`监听用户对表格的操作,如点击、双击、拖拽等,实现相应的功能响应,如单元格编辑、行列增删、排序等。 4. **公式计算**:如果需要类似Excel的计算功能,可以编写函数...

    jQuery+PureCSS可编辑表格插件.zip

    `mindmup-editabletable.js`是这个插件的核心JavaScript文件,它包含了表格编辑功能的实现。通过jQuery,这个脚本可以监听到表格单元格的点击事件,将普通的显示模式切换到编辑模式,允许用户直接在单元格内输入数据...

    div+css很好的例子与特效

    Div+CSS是Web开发中不可或缺的技术,它在创建网页布局和实现动态效果方面扮演着重要角色。本篇将围绕"div+css很好的例子与特效"这一主题,深入探讨相关知识点,并结合提供的压缩包文件中的实例进行解析。 首先,Div...

    Vue+Element实现表格编辑、删除、以及新增行的最优方法

    在Vue和Element UI框架下,实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践,旨在提高代码效率和用户体验。在传统的实现方式中,可能需要通过双击单元格来激活编辑模式,而这里我们...

    HTML+JavaScript动态表格

    项目中的“编辑表格”文件可能包含了实现这些功能的HTML代码、JavaScript脚本、CSS样式表,甚至可能包括了一些示例数据和图片。通过学习和理解这些代码,开发者可以掌握如何利用HTML和JavaScript创建具有复杂交互...

    利用jQuery与PureCSS实现的可编辑表格源码.zip

    在本项目中,"利用jQuery与PureCSS实现的可编辑表格源码.zip"是一个前端开发资源,它结合了两种强大的工具来创建一个交互式的、可编辑的表格。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...

    jQuery+Bootstrap表格内容修改删除编辑插件.zip

    本资源"jQuery+Bootstrap表格内容修改删除编辑插件.zip"提供了一个实用的解决方案,它将流行的前端框架jQuery与Bootstrap相结合,实现了表格内容的动态修改、删除和编辑功能。下面我们将详细探讨这个插件的核心知识...

    jQuery编辑表格+JS日历【升级版】

    在本项目中,我们主要关注的是"jQuery编辑表格+JS日历【升级版】",这是一个结合了数据编辑和日历功能的Web应用组件。这个升级版相较于之前的版本,不仅在视觉效果上进行了美化,提高了用户体验,而且还添加了登录...

    js_css_image

    通过编写JavaScript代码,开发人员可以控制Datatables的行为,如设置初始状态、自定义列、处理用户事件(如点击、双击或选择行)等。Editor插件则提供了API,用于创建复杂的编辑操作,包括多行编辑、表单验证、数据...

    基于jquery的可编辑表格实现代码

    本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格,允许用户双击单元格(TD元素)进行编辑,编辑完成后,数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...

    jquery添加表格行内编辑代码.zip

    接下来是`js`文件,这通常是JavaScript代码,用于处理表格的行内编辑逻辑。在jQuery中,你可以使用`.click()`或`.on('dblclick')`来绑定点击或双击事件。当用户点击编辑按钮或双击单元格时,可以隐藏原始文本并显示...

    jquery 可动态增行,动态编辑,删除的grid

    综上所述,jQuery Grid是实现动态数据管理的强大工具,其动态增行、编辑和删除功能极大地提升了Web应用的用户体验。通过理解并掌握这些关键特性,开发者可以构建出功能丰富的数据管理界面。在实际项目中,结合服务器...

    layui的表格table选中数据后更改本行的颜色

    总的来说,实现layui表格选中行变色的功能,主要涉及JavaScript事件监听、DOM操作以及CSS样式设置。在前后端分离的项目中,前端通过调用后端API获取数据并渲染到表格。理解并熟练运用这些技术,能帮助你更好地利用...

    一个类Excel纯JS表格上下滚动显示、在线编辑js类控件

    1.本控件设计封装了一个纯javascript表格显示js类控件,可以直接接口mysql数据库结果集查询,调用只需一行语句。控件具有自定义显示颜色、自定义显示宽高、类似excel上下左右滚动翻页、按字段排序、选择、修改、添加...

    在网页上可以编辑的表格

    3. **JavaScript交互**:为了实现编辑功能,我们需要JavaScript来监听用户的交互事件,如点击、双击等。通过JavaScript,我们可以修改DOM元素的值,实现单元格的即时编辑。同时,可以添加验证逻辑以确保输入的数据...

    jQuery JSON动态获取表格数据代码

    双击事件绑定到每行,实现了双击时折叠行的效果。另外,添加一个按钮`全部折叠/展开&lt;/button&gt;`,并绑定点击事件,实现对所有行的折叠和展开操作。 最后,确保在HTML文件中引入jQuery库(如果不在`js`目录中,可能...

    Layui表格监听行单双击事件讲解

    而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单...

Global site tag (gtag.js) - Google Analytics