<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组件提供了灵活的数据展示方式,包括基本的表格样式、分页、排序、筛选等特性。通过...
Bootstrap Blazor Table 组件自定义列生成 本文主要介绍了 Bootstrap Blazor Table 组件的自定义列生成方法,包括指定生成列、定义列功能和自定义单元格等内容。 首先,在 Bootstrap Blazor Table 组件中,我们...
3. **自定义继承通用Mapper**: MyBatis的Mapper接口允许我们定义SQL查询和操作,但每次为新表创建Mapper时都需要重复写一些通用的操作,例如增删查改。为了减少冗余,我们可以定义一个通用的Mapper接口,然后让其他...
本主题"Div仿制table送自定义Scrollbar支持排序"正是探讨这种技术的应用。 首先,Div仿制table是通过CSS布局(如Flexbox或Grid)和JavaScript来构建一个看起来和表格类似的结构,这样可以更灵活地控制单元格的样式...
首先,让我们理解“自定义Table”的概念。在网页开发中,HTML的`<table>`元素通常用于展示结构化数据,但其样式和功能相对有限。通过jQuery,我们可以扩展这些功能,创建具有复杂布局、可排序、可筛选、可分页等特性...
在本文中,我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库,它提供了各种各样的UI组件,以帮助开发者快速构建高质量的Web界面。其中,table组件是...
本示例“ios自定义table例子”旨在教你如何通过自定义UITableViewCell来实现个性化展示,让你能够在表格中自由地绘制内容。 首先,自定义一个UITableViewCell类。在Swift中,你可以创建一个新的Swift文件,例如`...
本教程将深入探讨如何在前端使用BootstrapTable库实现自定义的Excel导出功能,允许用户根据需求筛选数据并动态生成表格。 首先,`BootstrapTable`是一个流行的JavaScript插件,它为HTML表格提供了丰富的功能,如...
vxe-table是一款在Vue.js框架下设计的高性能表格组件,它的版本号为2.9.24,旨在提供一系列强大的功能来满足复杂的数据展示和操作需求。这款组件以易用性和灵活性为特点,集成了多种实用特性,包括但不限于增删改查...
自定义GridTable允许开发者根据特定需求调整其外观、行为和功能,以满足应用程序的独特要求。下面我们将深入探讨自定义GridTable的实现及其相关知识点。 1. **控件基础知识**:首先,了解控件的基本概念很重要。...
vxe-table是Vue.js中一款功能强大的表格组件,它为用户提供了丰富的表格操作功能,可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性,包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...
本文将详细介绍如何在`el-form`与`el-table`结合使用时,自定义`input`的验证操作。 首先,`el-form`组件通过`:rules`属性接收一个对象,该对象定义了各个字段的验证规则。例如: ```javascript data() { return ...
首先,`TableControl.xaml`是XAML文件,用于定义自定义控件的外观和布局。在WPF中,XAML是一种声明式语言,用于构建用户界面。在这个文件中,你可能会看到`Grid`、`DataGrid`或自定义的`UserControl`等元素,这些...
用户可以自定义各个表格列的类型(如文本、长度、数字型等),可以自定义各个表格列的输入方式(如文本框、下拉框、日期等)、可以自定义各输入框的校验(如必填项、只读项等),大大减少编程的工作量。
2. 初始化表格:通过JavaScript代码将表格标记为可排序,例如`sorttable.makeSortable(table)`。 3. 自定义排序规则:根据需要,为特定列定义排序函数。 在提供的压缩包中,`readme.txt`文件可能包含了关于如何使用...
基于Vue自定义树形tableCard是一项常见的任务,尤其在数据展示和管理时。在这个项目中,我们可能需要实现一个可扩展、交互性强的表格组件,它能够展示层级结构的数据,并且允许用户进行筛选、排序和操作。 首先,...
封装HTML的Table,可直接编辑单元格内容,光标失去焦点时更新表格数据,利用slot插槽绑定操作按钮(编辑,删除、分享等),涉及到技术点包括:父组件给子组件传值、refs 对DOM进行操作,slot具名插槽的使用,插槽...
在本案例中,我们讨论的是如何在Struts1中实现自定义标签的嵌套,特别是`table`和`user`这两个自定义标签的使用。 首先,我们需要理解自定义标签的工作原理。在Struts1中,自定义标签通常由两部分组成:标签库描述...
使用customRow 设置行属性,写对应事件 :customRow=”rowClick” 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { ...单元格的自定义分为两种方式。 一种是:通过tem