`
FengShen_Xia
  • 浏览: 279314 次
  • 性别: Icon_minigender_1
  • 来自: 东方水城
社区版块
存档分类
最新评论

Table操作(自定义)

    博客分类:
  • Web
阅读更多
<table id="ccc" class="table_c" width="683" onClick="setPos(this)" style="border-collapse: collapse">
	<tr align="center" bgcolor="#5DC0F3">
		<td>
		</td>
	</tr>

	<tr>
		<td>
			<div contentEditable> </div> <!-- contentEditable 可以修改td中内容 -->
		</td>
	</tr>
</table>

 

	//新增行
	function insertRow(obj){
		if(currRow >= 0 && currRow<obj.rows.length){
			var maxCell=obj.rows[0].cells.length;
			obj.insertRow(currRow+1);
			for(var i=0;i<maxCell;i++){
				obj.rows[currRow+1].insertCell(i);
				obj.rows[currRow+1].cells[i].innerHTML="<div contentEditable>"+q[i]+"</div>";
			}
	    	clear();
	    	chnBgcolor(obj,currRow,"#5DC0F3");
	  	}
	  	qxs++;
	}
	
	//删除行
	function deleteRow(obj){
		var rows=obj.rows.length;
		if(currRow>=1&&currRow<rows){
		   obj.deleteRow(currRow);
		}
		clear();
		qxs--;
	}
	
	//改变选中行的颜色
	function chnBgcolor(obj,index,color){
	    for(var i=0;i<obj.rows.length;i++){
			if(i==index){
				obj.rows[i].bgColor=color;
				obj.rows[0].bgColor="#5DC0F3";
		  	}else{
				obj.rows[i].bgColor="#F6FCFF";
		   	}
		}
	}
	
	//选择行
	function setPos(obj){
		var o = event.srcElement;
		if(o.tagName == "DIV"){
			currRow = o.parentElement.parentElement.rowIndex;
			currCell=o.parentElement.cellIndex;
			chnBgcolor(obj,currRow,"#C8EAFF");
		}else if(o.tagName == "TD"){
			currRow=o.parentElement.rowIndex;
			currCell=o.cellIndex;
		}else{
			currRow=obj.rows.length-1;
	    	currCeil=obj.rows[0].cells.length-1;
		}
	}

	//清空
	function clear(){
		currRow=0;
		currCell=0;
	}

 

		//利用jquery获取table中的td内容
		var qx = "";
		$("#ccc td div").each(function(){
			qx = qx +$(this).html()+"|";
		});

 

分享到:
评论

相关推荐

    用于layui table 自定义列

    本教程将深入探讨如何利用layui table实现自定义列,以及如何保存和应用这些自定义模板。 一、layui table组件基础 layui table组件提供了灵活的数据展示方式,包括基本的表格样式、分页、排序、筛选等特性。通过...

    Bootstrap Blazor Table 组件(四)自定义列生成.doc

    Bootstrap Blazor Table 组件自定义列生成 本文主要介绍了 Bootstrap Blazor Table 组件的自定义列生成方法,包括指定生成列、定义列功能和自定义单元格等内容。 首先,在 Bootstrap Blazor Table 组件中,我们...

    自定义逆向工程 可生成Table注解 自定义继承通用mapper

    3. **自定义继承通用Mapper**: MyBatis的Mapper接口允许我们定义SQL查询和操作,但每次为新表创建Mapper时都需要重复写一些通用的操作,例如增删查改。为了减少冗余,我们可以定义一个通用的Mapper接口,然后让其他...

    Div仿制table送自定义Scrollbar支持排序

    本主题"Div仿制table送自定义Scrollbar支持排序"正是探讨这种技术的应用。 首先,Div仿制table是通过CSS布局(如Flexbox或Grid)和JavaScript来构建一个看起来和表格类似的结构,这样可以更灵活地控制单元格的样式...

    JQuery 自定义 Table

    首先,让我们理解“自定义Table”的概念。在网页开发中,HTML的`&lt;table&gt;`元素通常用于展示结构化数据,但其样式和功能相对有限。通过jQuery,我们可以扩展这些功能,创建具有复杂布局、可排序、可筛选、可分页等特性...

    element-ui组件table实现自定义筛选功能的示例代码

    在本文中,我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库,它提供了各种各样的UI组件,以帮助开发者快速构建高质量的Web界面。其中,table组件是...

    ios自定义table例子

    本示例“ios自定义table例子”旨在教你如何通过自定义UITableViewCell来实现个性化展示,让你能够在表格中自由地绘制内容。 首先,自定义一个UITableViewCell类。在Swift中,你可以创建一个新的Swift文件,例如`...

    自定义导出Excel代码及包.rar

    本教程将深入探讨如何在前端使用BootstrapTable库实现自定义的Excel导出功能,允许用户根据需求筛选数据并动态生成表格。 首先,`BootstrapTable`是一个流行的JavaScript插件,它为HTML表格提供了丰富的功能,如...

    vxe-table-v2.9.24_表格组件_Table_

    vxe-table是一款在Vue.js框架下设计的高性能表格组件,它的版本号为2.9.24,旨在提供一系列强大的功能来满足复杂的数据展示和操作需求。这款组件以易用性和灵活性为特点,集成了多种实用特性,包括但不限于增删改查...

    自定义GridTable(可以用来研究自定义控件的实现)

    自定义GridTable允许开发者根据特定需求调整其外观、行为和功能,以满足应用程序的独特要求。下面我们将深入探讨自定义GridTable的实现及其相关知识点。 1. **控件基础知识**:首先,了解控件的基本概念很重要。...

    vxe-table vue table 表格组件功能

    vxe-table是Vue.js中一款功能强大的表格组件,它为用户提供了丰富的表格操作功能,可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性,包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...

    vue element table中自定义一些input的验证操作

    本文将详细介绍如何在`el-form`与`el-table`结合使用时,自定义`input`的验证操作。 首先,`el-form`组件通过`:rules`属性接收一个对象,该对象定义了各个字段的验证规则。例如: ```javascript data() { return ...

    WPF自定义表格控件

    首先,`TableControl.xaml`是XAML文件,用于定义自定义控件的外观和布局。在WPF中,XAML是一种声明式语言,用于构建用户界面。在这个文件中,你可能会看到`Grid`、`DataGrid`或自定义的`UserControl`等元素,这些...

    web jsp table tree

    用户可以自定义各个表格列的类型(如文本、长度、数字型等),可以自定义各个表格列的输入方式(如文本框、下拉框、日期等)、可以自定义各输入框的校验(如必填项、只读项等),大大减少编程的工作量。

    很灵活的javascript 表格排序 功能强大 可自定义排序规则

    2. 初始化表格:通过JavaScript代码将表格标记为可排序,例如`sorttable.makeSortable(table)`。 3. 自定义排序规则:根据需要,为特定列定义排序函数。 在提供的压缩包中,`readme.txt`文件可能包含了关于如何使用...

    基于Vue自定义树形tableCard

    基于Vue自定义树形tableCard是一项常见的任务,尤其在数据展示和管理时。在这个项目中,我们可能需要实现一个可扩展、交互性强的表格组件,它能够展示层级结构的数据,并且允许用户进行筛选、排序和操作。 首先,...

    Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip

    封装HTML的Table,可直接编辑单元格内容,光标失去焦点时更新表格数据,利用slot插槽绑定操作按钮(编辑,删除、分享等),涉及到技术点包括:父组件给子组件传值、refs 对DOM进行操作,slot具名插槽的使用,插槽...

    struts1 自定义标签嵌套 table&&user

    在本案例中,我们讨论的是如何在Struts1中实现自定义标签的嵌套,特别是`table`和`user`这两个自定义标签的使用。 首先,我们需要理解自定义标签的工作原理。在Struts1中,自定义标签通常由两部分组成:标签库描述...

    vue用ant design中table表格,点击某行时触发的事件操作

    使用customRow 设置行属性,写对应事件 :customRow=”rowClick” 然后在data里面写 rowClick: record =&gt; ({ // 事件 on: { click: () =&gt; { ...单元格的自定义分为两种方式。 一种是:通过tem

Global site tag (gtag.js) - Google Analytics