精华内容
下载资源
问答
  • 浅谈js中如何动态添加表头/表/表格内容我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据。用for循环就可以轻松搞定。 ...

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据。用for循环就可以轻松搞定。

    如果我们的业务需求有所变化,可能我们要的数据就不是这样一条一条的中规中矩的。如果你还是新手,又没有人教你,在网上又搜不到方法,可以告诉你一个简便的方法,那就是让后台写服务的同事在后台把数据拼接好返回给你,当然了,这种无理的要求一般大部分会遭到拒绝的,那怎么办呢?动脑子了。。。

    下面列举一下我经常遇到的一些表格格式:

    1. 固定的表头,固定的列数据

    这种的话是最简单不过的了,后台丢给你的数据也是一条一条的,你只要按顺序去绑定就可以了

    2. 固定的表头,列数据不固定

    这种的话,对于没写过的童鞋来说,刚开始可能有点手足无措,但是一旦方法找到了,就会发现没有什么难度了,这样的情况中,一般数据都是以单元格形式一条条的返回的。也就是给你的数据,可能是只能填充一个单元格的,这样的情况一般出现在统计表格中。那要如何去遍历后台返回的数据,然后正确的填充表格中去呢?

    我的方法是这样的,首先表头是固定的,这就好办了,这样的话,你就先把表头写好,每个表头给一个相应的class用来区分。然后给的列数据当中,第一行中肯定有一个唯一的id,一般这种都是以人为主键的id。我们这里就假如是查客户的一些信息。比方,你查的是客户,那么你肯定要将客户的名称作边这个表格的第一列,这个时候,表格中tbody的每一行tr的第一个单元格td肯定是存放你的客户名称,这个时候,你就把客户的id作为这一行的唯一标识:

    <table>
    			</thead>
    				<th>姓名</th>
    				<th class='fl-1'>分类1</th>
    				<th class='fl-2'>分类2</th>
    				<th class='fl-3'>分类3</th>
    			</thead>
    			<tbody>
    				<tr data-id='"+customerId+"'>
    					<td>张三</td>
    					<td class='fl-1'>10</td>
    					<td class='fl-2'>20</td>
    					<td class='fl-3'>30</td>
    				</tr>
    			</tbody>
    		</table>
    

    但是表格填充和普通的元素填充是不一样的。因为表格的话你不能想在哪里填充就在那里填充,一个表格看起来是要完整的。所以你在填充的时候,先将一行先填充起来,再往里面填充数据。假如我们这个是一个4列的动态数据。你就可以这样去填充。

    	//假如从后台返回的数据结果是一个json格式的 result;
    	var customerId=result.customerId;
    	if($("table tbody tr").length==0){//表示你的表格还没填充任何一条数据
    		$("table tbody").append("<tr data-id='"+customerId+"'><td></td><td></td><td></td></tr>");
    	}else{
    		/*假如这个时候你的表格中已有添加过数据了!那这个时候,新的一条数据要怎么办呢?那这个时候要判断这条是一条新数据,还是一条应该往已有行单元格里填充。那你就可以根据customerId判断了*/
    		
    		//如果是一条需要你往已有表格里填的数据		
    		if($("table tbody tr[data-id='"+customerId+"']").length>0){
    			//这个时候看给你的数据分类了。假如结果是这样的(一般都是用循环解析数据的,我在这里就简写了)
    			var fl=reslut.list[i].fl;//获取分类
    			var fl-value=result.list[i].fl-value;//获取分类值
    			//下面这种写法就会将对应的数据填充到对应的单元格
    			$("table tbody tr[data-id='"+customerId+"'] td."+fl).text(fl-value);
    		}else{//表示将添加一条新数据
    		$("table tbody").append("<tr data-id='"+customerId+"'><td></td><td></td><td></td></tr>");
    		//继续用填充所要的数据就可以了
    		}
    	}
    

    3.表头不固定,列数据也不固定

    这种情况的话一般比较少见,但是是有的。假如我们的需求是统计公司的所有的员工的签到信息,然后表头的话是根据时间去动态生成的。那这个时候我们要怎么做呢?

    首先,根据时间去查询表头,让后台返回一个表头的数据,我们先填充好表头,然后按钮第2种情况中所说的,给表头加一个class属性,这样的话,后面就和第2种情况差不多了。我就不细说了

    总结,在第2种情况和第三种情况中,我们一般在填充tbody中的数据的时候,首先一定要添加一行后,再去添加数据,我一般用比较笨的方法,是填充一个td有class数据为空的行,这样的话,当我得到数据的时候,我就可以直接准确的定位到我所需要填充数据的单元格中。

    其实这种不固定的表格数据填充,只要你掌握方法了,那么你就会发现,其实不难,如果方法找不到,你在那里墨迹一天也不一定有进展,你的思路一定要清晰。
    如果还有不懂的童鞋,可以给我留言。

    展开全文
  • 获取所在行QTableWidget单元格动态添加的控件,获取所在的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入段漂亮的代码片生成个适合你的列表创建表格...

    最近在使用QTableWidget,碰到了在单元格中动态添加控件,如QPushButton、QComboBox等,添加十分简单,直接使用QTableWidget::setCellWidget(int row, int column, QWidget widget)这一函数就可添加成功,但是怎么获取所在行列成了难题。
    网上查找了相关方法,大多数都是使用的通过点击该控件的方法获取它的行和列;
    按键对应的槽函数:
    QPushButton
    pButton = qobject_cast<QPushButton*>(sender());
    int x = pButton->frameGeometry().x();
    int y = pButton->frameGeometry().y();
    QModelIndex index = ui.tableWidget->indexAt(QPoint(x, y));
    int iRow = index.row();
    int iCol = index.column();

    这样就获取当前的行和列了,但是我获取到的全是0行0列,而且很多评论区的小伙伴也遇到了同样的问题,仔细分析了一下,问题出现在添加按键上,因为我需要添加的是两个按键,所以加了个布局以及 QWidget* btns = new QWidget(this);,这样获取的始终是在按键这个btns中的位置,所以一直都是0,0。
    效果图:
    在这里插入图片描述

    直接看修正后的完整代码:
    添加按键代码:

    QHBoxLayout* hlayout = new QHBoxLayout();
    hlayout->addStretch();
    QPushButton* modify = new QPushButton(this);
    QPushButton* remove = new QPushButton( this);
    connect(modify, &QPushButton::clicked, this, &AlgoForm::modifyBtnClicked);
    connect(remove, &QPushButton::clicked, this, &AlgoForm::removeBtnClicked);
    hlayout->addWidget(modify);
    hlayout->addWidget(remove);
    hlayout->addStretch();
    QWidget* btns = new QWidget(this);
    btns->setLayout(hlayout);
    ui->tableWidget->setCellWidget(row, 6, btns); //两按键添加到表格的row行,6列
    

    对应的槽函数:

    // 获取点击的按钮
    QPushButton* Obj = qobject_cast<QPushButton*>(this->sender());
    if (Obj == nullptr)
    {
        return;
    }
    QModelIndex qIndex = ui->tableWidget->indexAt(QPoint(Obj->parentWidget()->frameGeometry().x(), Obj->parentWidget()->frameGeometry().y()));
    // 获取按钮所在的行和列
    int row = qIndex.row();
    int column = qIndex.column();
    

    与其他代码基本相同,就是要修改为获取父类窗体的位置,即Obj->parentWidget()->frameGeometry().x(),Obj->parentWidget()->frameGeometry().y(),这样就可正确获取按键所在表格的行列了。
    总结:如果小伙伴添加按键时无任何附加操作,可直接用最上面的代码就可获取正确的位置,但是如果加入了布局,就需要修改为父类控件的位置,希望可以提醒到一些小伙伴,省下一些时间吃火锅!!!!

    展开全文
  • 固定第一列 setFixedFirstColumn//1.4版本取消了 可以使用Column.setFixed 固定任意列。 20. 固定统计行 setFixedCountRow 21. 列标题上下padding setColumnTitleVerticalPadding 22. 增加列标题左右padding ...
  • jQuery.inline 编辑 jQuery.inlineEdit 是 Mayank K Rastogi 的一个简单而轻量级的 jQuery 插件,它允许您内联编辑 html 表格行。 特征: 编辑列的值作为输入类型date ...对于您希望可编辑的行的每一列,指定type和n
  • jQuery如何追加tr到table

    千次阅读 2018-04-18 11:53:49
    jQuery添加新内容有以下4个方法: append()-在被选元素的结尾插入内容prepend()-在被选元素的插入内容after()-在被选元素之后插入内容before()-在被选元素之前插入内容 下面实例演示:点击按钮则在表格...

    jQuery添加新内容有以下4个方法:

    1. append()-在被选元素的结尾插入内容
    2. prepend()-在被选元素的插入内容
    3. after()-在被选元素之后插入内容
    4. before()-在被选元素之前插入内容

    下面实例演示:点击按钮则在表格数据区增加一行

    1、HTML结构

    <table id="test">
          <thead>
                 <tr><th>列1</th><th>列2</th><th>列3</th></tr>
           </thead>
           <tbody>
                   <tr><td>1</td><td>1</td><td>2</td></tr>
                    <tr><td>2</td><td>4</td><td>5</td></tr>
            </tbody>
    </table>
    <input type="button" id="btn1" value="在开头增加">
    <input type="butttom" id="btn2" value="在末尾增加">

    2、jQuery代码

    $(function(){
             $("#btn1").click(function(){
                     $("#test tbody").prepend('<tr><td></td><td></td><td></td></tr>');
                       });
               $("#btn22").click(function(){
                        $("#test tbody").append('<tr><td></td><td></td><td></td></tr>');
                        });
    });


    展开全文
  • jQuery如何追加tr到table

    千次阅读 2016-03-20 22:29:29
    jQuery 添加新内容有以下四个方法: append() - 被选元素的结尾插入内容 prepend() - 被选元素的开头插入内容 after() - 被选元素之后插入内容 before() - 被选元素之前插入内容 ...

     jQuery 添加新内容有以下四个方法:

    • append() - 在被选元素的结尾插入内容

    • prepend() - 在被选元素的开头插入内容

    • after() - 在被选元素之后插入内容

    • before() - 在被选元素之前插入内容

    下面实例演示:点击按钮则在表格数据区域增加一行

    1、HTML结构

    <table id = "test">
    	<thead>
    		<tr><th>列1</th><th>列2</th><th>列3</th></tr>
    	</thead>
    	<tbody>
    		<tr><td>1</td><td>1</td><td>2</td></tr>
    		<tr><td>2</td><td>4</td><td>5</td></tr>
    	</tbody>		
    </table>
    <input type="button" id="btn1" value="在开头增加">
    <input type="button" id="btn2" value="在末尾增加">

    2、jquery代码

    $(function(){
    	$("#btn1").click(function() {
    		$("#test tbody").prepend('<tr><td></td><td></td><td></td></tr>');
    	});
    	$("#btn2").click(function() {
    		$("#test tbody").append('<tr><td></td><td></td><td></td></tr>');
    	});
    });

    3、效果演示

    展开全文
  • 数字表格内容的格式(例如显示的位数)以及文本和数字的对齐方式可以针对每一列单独更改。 要使用,请提取 zip-archive 并将提取的文件夹('datatablepackage')添加到您的 matlab 路径。 键入“help DataTable...
  • 109. 将WORD中的内容作为图片链接插入EXCEL表格中 61 110. 独立的窗口中处理内嵌式图表 62 111. 图表中显示隐藏数据 62 112. 图表中增加文本框 63 113. 建立文本与图表文本框的链接 63 114. 给图表增加数据...
  • //向月份下拉框增加内容 for (int i = 1; i ; i++) { //构造下拉框的12个月份 monthsComboBox.addItem(new Integer(i)); } monthsComboBox.setSelectedIndex(calendar.get(Calendar.MONTH));//下拉框当前...
  • Excel新手完全教程

    2014-10-08 23:13:58
    109. 将WORD中的内容作为图片链接插入EXCEL表格中 44 110. 独立的窗口中处理内嵌式图表 45 111. 图表中显示隐藏数据 45 112. 图表中增加文本框 45 113. 建立文本与图表文本框的链接 46 114. 给图表增加数据...
  • 将数据添加到数据表03/30/2017本文内容在创建 DataTable 并使用和约束定义其结构之后,您可以将的数据行添加到表。 要添加新行,可将变量声明为 DataRow 类型。 当调用方法时,将返回的 DataRow ...
  • 章 入门 1 启动 ARCSIGHT 控制台 1 快速启动工具和标准内容 1 用例 2 第二章 控制台中工作 3 ...表格中的 "分析频道" 选项 301 排序、显示和编辑选项 303 图表格式的结果 305 查询查看器疑难解答 306 将查询
  • MYSQL中文手册

    2013-03-11 21:21:34
    个数据库创建多个表的缺陷 7.5. 优化MySQL服务器 7.5.1. 系统因素和启动参数的调节 7.5.2. 调节服务器参数 7.5.3. 控制查询优化器的性能 7.5.4. 编译和链接怎样影响MySQL的速度 7.5.5. MySQL如何使用...
  • 个数据库创建多个表的缺陷 7.5. 优化MySQL服务器 7.5.1. 系统因素和启动参数的调节 7.5.2. 调节服务器参数 7.5.3. 控制查询优化器的性能 7.5.4. 编译和链接怎样影响MySQL的速度 7.5.5. MySQL如何使用内存 ...
  • 让 Affinity Publisher 帮助您以创造性的方式可视化文本,并文档无缝流动。 文字样式 将文本样式链接到文档的所有页面 OpenType 支持 打开最新 OpenType 字体的所有风格功能 文字装饰 为排版元素添加线条...
  • mysql5.1中文手册

    2008-01-09 09:54:20
    个数据库创建多个表的缺陷 7.5. 优化MySQL服务器 7.5.1. 系统因素和启动参数的调节 7.5.2. 调节服务器参数 7.5.3. 控制查询优化器的性能 7.5.4. 编译和链接怎样影响MySQL的速度 7.5.5. ...
  • Visual C++ 6.0中如何利用UDL文件来建立ADO连接 如何通过ADO接口连接数据库 如何通过ADO的记录集获得每条记录的信息 如何通过ADO的记录集修改记录信息 如何用SQL语句按时间检索 如何用SQL语句按字符串检索 如何...
  • 创建俱乐部 如果您想根据此 repo 中列出的课程创建自己的俱乐部,请按照以下步骤操作: 使用谷歌表单制作注册表单(您可以复制) 将下面的课程模板复制/粘贴/修改到您的表单大纲 获取您表单的链接,然后转...
  •  我觉得应该itembound事件 e.items.cell["你的"].text=DateTime.Parse(e.items.cell["你的"].text.ToString("yyyy-MM-dd"))  9.获取错误信息并到指定页面  不要使用Response.Redirect,而应该使用...
  • 实例304 将DataGrid表格中的查询结果输出到Excel中 实例305 利用Word打印 实例306 利用Excel打印 10.10 控制打印 实例307 打印超长字符串自动换行 实例308 批量打印文档 实例309 实现横向打印 实例310 设置...
  • ZendFramework中文文档

    2011-03-22 10:11:12
    10.4.2. 同一表查询多数据 10.4.3. 多表联合查询 10.4.4. WHERE条件 10.4.5. GROUP BY分句 10.4.6. HAVING 条件 10.4.7. ORDER BY 分句 10.4.8. 通过总数和偏移量进行LIMIT限制 10.4.9. 通过页数和总数...
  • delphi 开发经验技巧宝典源码

    热门讨论 2010-08-12 16:47:23
    0208 DataGrid中如何使标题文字居中 138 0209 如何把ListBox中的内容拖曳到另个ListBox中 139 0210 把DBGrid中的数据赋给数组 139 0211 如何获取DataGrid单元格中的内容 140 0212 如何锁定文本框中的...
  • 0208 DataGrid中如何使标题文字居中 138 0209 如何把ListBox中的内容拖曳到另个ListBox中 139 0210 把DBGrid中的数据赋给数组 139 0211 如何获取DataGrid单元格中的内容 140 0212 如何锁定文本框中的...
  • 0208 DataGrid中如何使标题文字居中 138 0209 如何把ListBox中的内容拖曳到另个ListBox中 139 0210 把DBGrid中的数据赋给数组 139 0211 如何获取DataGrid单元格中的内容 140 0212 如何锁定文本框中的...
  • 为了告诉Package Control您正在使用ST包中的表格模块,请包根目录创建具有以下内容的dependencies.json文件: { "*" : { "*" : [ "tabulate" ] } } 如果该文件已经存在,则将"tabulate"添加到每个依赖项...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 198
精华内容 79
关键字:

在表格中如何添加一列新内容