精华内容
下载资源
问答
  • 在项目中很多时候遇到这样的问题,需要动态的增加、删除表格,在学习jQuery的过程中,自己试着在网上找寻教程,发现都不符合自己的需要,所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一...
  • 解决掉的问题 ... // 获取表格 var oTable = document.getElementById("tb1"); // 获取表格中tBody主体域 var oTBody = oTable.tBodies[0]; // 获取oTBody域中行集合 var colDataRows = oTBod


        接着上一篇博文,解决上一篇博文最后遗留的瑕疵,同时,给表格列添加了排序功能。


        解决掉的问题

        1 乱码的问题

        2 删除方法更加简便,省去获取父节点id的代码

        3 点击第一行的add按钮后,下行table行变宽问题


    <html>
    	<head>
    		<title>Table</title>
    		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    		<style>
    			table thead tr th {
    				text-align : center,
    				font-weight : bold
    			}
    			
    		</style>
    	</head>
    	<body>
    		<table id="tb1" border="1">
    			<thead>
    				<tr>
    					<th width="150px" οnclick="sortTable()" style="cursor:pointer">First Name</th>
    					<th width="150px">Last Name</th>
    					<th width="130px"> </th>
    				</tr>
    			<thead>
    			<tbody id="tb">
    				<tr id="1st">
    					<td width="150px"><input name="firstName" value="张" /></td>
    					<td width="150px"><input name="firstName" value="三" ></td>
    					<!-- 这里的两个input输入域和连接的 必须放置在一行,否则表格主体的第一行的两个按钮之间多一个空格-->
    					<td width="130px"><input type="button" value="Add" οnclick="add()"> <input type="button" value="Del" οnclick="del(this)"></td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>
    <script>
    	function add() {
    		// 创建table 行标签tr
    		var trObj = document.createElement("tr");
    		// 设置行内容
    		trObj.innerHTML = "<td width='150px'><input name='firstName'/></td><td width='150px'>"
    			+ "<input name='lastName'/></td><td width='130px'><input type='button' value='Add' οnclick='add()'> "
    			+ "<input type='button' value='Del' οnclick='del(this)'></td>";
    		// 将行内容添加到表格中
    		document.getElementById("tb").appendChild(trObj);
    	}
    
    	function del(obj) {
    		// 直接删除当前对象的父节点的父节点
    		document.getElementById("tb").removeChild(obj.parentNode.parentNode);
    	}
    	
    	function compareTRs(oTR1, oTR2) {
    		// 获取行中的需要比较的firstName列的值
    		var sValue1 = oTR1.firstElementChild.firstElementChild.value;
    		var sValue2 = oTR2.firstElementChild.firstElementChild.value;
    		// 进行比较
    		return sValue1.localeCompare(sValue2);
    	}
    	
    	function sortTable(){
    		// 获取表格
    		var oTable = document.getElementById("tb1");
    		// 获取表格中tBody主体域
    		var oTBody = oTable.tBodies[0];
    		// 获取oTBody域中行集合
    		var colDataRows = oTBody.rows;
    		// 新建行数组,用于存放行内容
    		var aTRs = new Array;
    		
    		// 将oTBody中的行内容添加到aTRs中
    		for (var i=0; i < colDataRows.length; i++) {
    			aTRs[i] = colDataRows[i];
    		}
    		
    		// 若oTable的sortCol 属性为空,对数组进行反转,否则进行排序
    		if (oTable.sortCol) {
    			aTRs.reverse();
    		} else {
    			aTRs.sort(compareTRs);
    		}
    
    		// 创建代码片段,存放排序后的行数据
    		var oFragment = document.createDocumentFragment();
    		for (var i=0; i < aTRs.length; i++) {
    			oFragment.appendChild(aTRs[i]);
    		}
    
    		// 将存放有排序后行数据的代码片段添加到表格主体oTBody上
    		oTBody.appendChild(oFragment);
    		
    		// 设置排序标识
    		oTable.sortCol = true;
    	}
    </script> 


    展开全文
  • js实现动态增加和删除表格。实例 js实现动态增加和删除表格。实例
  • HTML动态增加和删除表格

    万次阅读 2017-12-03 13:20:20
    增加行 增加列 删除 删除 function addrow(){  var c=document.getElementById('mytable');//获得表格的信息  if( c.rows.length==0){//如果是向一个空表增加  ...

    起始状态


    增加行


    增加列


    删除行


    删除列


    <!doctype html>
    <html>
    <head>
    <!--动态生成指定行数和列数的可编辑表格-->
    <style>

    </style>
    <script>
    function addrow(){
      var c=document.getElementById('mytable');//获得表格的信息
      if( c.rows.length==0){//如果是向一个空表增加一行
     var x=c.insertRow(0);//向空表插入一行
     var y=x.insertCell(0);//向新行插入一列
     y.innerHTML="new cell0";
      }
    else{
    var z=c.rows[0].cells;//如果不是空表,首先获得表格有多少列,先获取再插入新行
    var x=c.insertRow(0);
    for(var i=0;i<z.length;i++){//依次向新行插入表格列数的单元格
         var y=x.insertCell(i);
    y.innerHTML="new cell"+i;
     }
    }
    }
    function delrow(){
    var x=document.getElementById("mytable");
    x.deleteRow(0);//删除一行
    }
    function addcol(){
    var c=document.getElementById('mytable');//获取表格信息
    var len=c.rows.length;//获得行数
    var ro=c.rows[0].cells;
    var len2=ro.length;//获得列数
    for(var i=0;i<len;i++){
    var x=c.rows[i].insertCell(len2);//依次向每一行的末尾插入一个新列
    x.innerHTML="new cell"+len2;
    }
    }
    function delcol(){
    var c=document.getElementById('mytable');//获取表格信息
    var len=c.rows.length;//获取表格的行数
    var ro=c.rows[0].cells//获取表格的列数
    var len2=ro.length-1;
    for(var i=0;i<len;i++){
    var x=c.rows[i].deleteCell(len2);//删除每一行末尾的单元格
    }
    }
    </script>
    <meta charset="UTF-8">
    </head>
    <body>
    <p><input type="button" value="增加行" οnclick="addrow()" >&nbsp&nbsp<input type="button" value="删除行" οnclick="delrow()">&nbsp&nbsp
    <input type="button" value="增加列" οnclick="addcol()">&nbsp&nbsp<input type="button" value="删除列" οnclick="delcol()"></p>
    <table frame="border" rules="all" id="mytable">
    <caption>测试表</caption>
    <tr>
    <td>单元格</td><td>单元格</td>
    </tr>
    </table>
    </body>
    </html>

    展开全文
  • 带富文本编辑器以及支持表格操作,可拉伸单元格宽度、增加行增加列、合并单元格
  • 动态表格,功能为点击添加按钮,表格增加并给其name属性赋予的值,点击删除,自动删除这一,具体实现如下
  • jquery 动态增加、删除表格操作。

    有时候会遇到类似的增加删除行的功能,如果不用插件之类的,手写的话,还要百度找攻略:

    表格图片

    方法比较多,讲自己用的2个方法:

    下面是测试页面:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title>动态添加表格行、列</title>
            <style type="text/css">
                table.table {
                    font-family: verdana,arial,sans-serif;
                    font-size:11px;
                    color:#333333;
                    border-width: 1px;
                    border-color: #666666;
                    border-collapse: collapse;
                }
                table.table th {
                    border-width: 1px;
                    padding: 8px;
                    border-style: solid;
                    font-size:14px;
                    border-color: #666666;
                    background-color: #dedede;
                    line-height:20px;
                }
                table.table td {
                    border-width: 1px;
                    padding: 8px;
                    border-style: solid;
                    border-color: #666666;
                    background-color: #ffffff;
                    line-height:18px;
                }
    </style>
        </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                    <th>列4</th>
                    <th>列5</th>
                    <th>列6</th>
                </tr>
            </thead>
            <tbody id="trlist">
                <tr id="tr">
                    <td><input type="checkbox" name="checkbox"/></td>
                    <td><input type="text"/></td>
                    <td><input type="text"/></td>
                    <td><input type="text"/></td>
                    <td><input type="text"/></td>
                    <td><input type="text"/></td>
                </tr>
            </tbody>
        </table>
        <div>
            <input type="button" id="addrow" value="新增" />
            <input type="button" id="removerow" value="删除" />
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        </body>
    </html>
    

    一、直接在表格后添加一行:

    将js放入jquery后面。 这个是直接加载页面的时候。用js获取到tr的document文本,然后直接在tr后面直接添加。
    关于添加行的位置,可以用insertBefore,insertAfter,after,appendTo等,jquery的方法,看需求自己定。想在哪里添加行都可以。
    
    <script type="text/javascript">
        $(function(){
            $("#addrow").click(addrow);//绑定添加事件
            $("#removerow").click(removerow);//绑定删除事件。
        });
        
        var trlisthtml = $("#trlist").html();//获取默认的一行tr,用作复制
        function addrow(){//增加
            $(".table>tbody:last").append(trlisthtml);//向tbody最后添加一行tr.
        }
        
        function removerow(){//移除
            $('input[name="checkbox"]:checked').each(function(){
    		    $(this).parent().parent().remove();//移除当前行 checkbox的父级是td,td的父级是tr,然后删除tr。就ok了。用each,选择多行遍历删除
            });
        }
        </script>
    

    二、用jquery的clone方法:

    方法都是很简单的,但是有时候想不到。每写一个方法,就会发现一个新方法。越优化,越舒服。

    <script type="text/javascript">
        $(function(){
            $("#addrow").click(cloneaddrow);//绑定添加事件
            $("#removerow").click(removerow);//绑定删除事件。
        });
        
       function cloneaddrow(){
            $(".table>tbody:last").append($("#tr").clone());//复制tr,并且添加
        }
        
        function removerow(){//移除
            $('input[name="checkbox"]:checked').each(function(){
    		    $(this).parent().parent().remove();//移除当前行 checkbox的父级是td,td的父级是tr,然后删除tr。就ok了。用each,选择多行遍历删除
            });
        }
        </script>
    

    只是2个方法的应用。有时候很多需求看似简单,但如果不是非常熟悉,或者经常写,就会被卡住,会耽误一些时间。记录下来,以后可以使用。
    多写代码,优化是条没有尽头的路
    有不对的,望指点。每次写完,都担心怕误了谁家子弟。。。

    展开全文
  • swing 表格模型增加删除

    千次阅读 2017-05-29 12:29:09
    //进行增加,删除表格都是对表格模型操作,与table无关 public void actionPerformed(ActionEvent e) { if (e.getSource().equals(jb1)){ tableM.addColumn("新增"); } //新增一 if (e.getSource()...
    package table;
    
    import java.awt.BorderLayout;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import java.util.Vector;
    import java.util.concurrent.BrokenBarrierException;
    
    import javax.swing.*;
    import javax.swing.table.DefaultTableModel;
    import javax.swing.table.TableColumnModel;
    
    public class Tab1 extends JFrame implements ActionListener{
    	JTable jt1;
    	DefaultTableModel tableM;
    	JScrollPane jsp1;
    	JButton jb1,jb2,jb3,jb4;
    	JPanel jp1;
    	public static void main(String[] args) {
    		new Tab1();
    	}
    	Tab1(){
    		String[] name = new String[]{"列1","列2","列3","列4","列5"};
    		String[][] data = new String[5][5];
    		int value = 1;
    		for (int i=0; i<data.length; i++){
    			for(int j=0; j<data[i].length; j++){
    				data[i][j] = String.valueOf(value++);
    			}
    		}
    		//初始化表格模型,设置表头和数据
    		tableM = new DefaultTableModel(data, name);
    		//初始化表格,与模型建立联系
    		jt1 = new JTable(tableM);
    		//把表格放入滚动窗中
    		jsp1 = new JScrollPane(jt1);
    	
    		
    		jb1 = new JButton("添加列");
    		jb2 = new JButton("添加行");
    		jb3 = new JButton("删除列");
    		jb4 = new JButton("删除行");
    		jp1 = new JPanel();
    		this.add(jp1, BorderLayout.SOUTH);
    		jp1.add(jb1);
    		jp1.add(jb2);
    		jp1.add(jb3);
    		jp1.add(jb4);
    		this.add(jsp1);
    		
    		jb1.addActionListener(this);
    		jb2.addActionListener(this);
    		jb3.addActionListener(this);
    		jb4.addActionListener(this);
    		this.setSize(400, 400);
    		this.setVisible(true);
    		this.setDefaultCloseOperation(EXIT_ON_CLOSE);
    	}
    	@Override
    	//进行增加,删除表格都是对表格模型操作,与table无关
    	public void actionPerformed(ActionEvent e) {
    		if (e.getSource().equals(jb1)){
    			tableM.addColumn("新增列");
    		}
    		//新增一行
    		if (e.getSource().equals(jb2)){
    			tableM.addRow(new Vector());
    		}
    		/**
    		 * 删除列 做法: 先通过getColumnCount获取表格模型列数,通过 setColumnCount设置
    		 * setColumnCount如果新大小   小于   当前大小,则将丢弃索引 columnCount 处及其之后的所有列
    		 */
    		if (e.getSource().equals(jb3)){
    			int col = tableM.getColumnCount()-1;
    			tableM.setColumnCount(col);
    		}
    		if (e.getSource().equals(jb4)){
    			int row = tableM.getRowCount()-1;
    			if(row < 0){
    				return ;
    			}
    			tableM.removeRow(row);
    		}
    	}
    }
    

    展开全文
  • 使用JavaScript动态增加表格

    千次阅读 2007-07-25 10:30:00
    得到要删除的在table中的序号rowindex,之后用table.deleteRow(rowindex)2. 得到要删除的, 之后tr.parentNode.removeChild(tr) 下面是一个demo var i=-1; function add(){ i=i+1; var
  • JS实现可编辑的表格,双击可编辑,可以删除增加行,重置,导出表格,也可以上下移动元素 源代码下载地址:http://www.zuidaima.com/share/1550463322606592.htm
  • CCED5.0表格内数据的计算及自动增加列,序号的方法.pdf
  • //为表格主体添加单击事件,当单击时添加行数,使表格保持有5个空行 function autoRowsTable(tbodyID) { var tb = ""; if (!document.getElementById(tbodyID)) { return; } if (!document.getElementById(tbody...
  • View UI (iview)表格 /合并 教程

    千次阅读 多人点赞 2020-05-13 15:18:57
    在项目开发中,有时需要将表格进行合并,View UI (iView)从4.0.0版本开始,增加/合并 属性,使我们可以方便地对表格行列进行合并,本文介绍这一属性如何使用 1、基本使用介绍 首先,要确保使用...
  • 原生JS实现不固定表格

    千次阅读 2019-04-01 09:44:25
    起始显示一表格th,然后根据用户是否输入值,动态增加行,每次根据倒数第二是否有值,以此来判断是否要新增,每次根据倒是第二是否有值,以此来判断是否要新增,然后根据的值是否清空,...
  • 使用jQuery操纵表格-增加、删除,示例代码如下: .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } var rowCount = 0; var colCount = 2; function addRow(){ rowCount...
  • HTML5 使用JQuery对表格进行增加列操作 1.设计数据表格页面; 2增加“平均成绩”,显示每个学生的三门课的平均成绩,保留一位小数点; 3.把身为党员,且平均成绩>87分的女同学数据使用红色背景标注 style...
  • 表格默认5,点按钮动态增加删除,但是左边第一和右边最后一自动延长,不增加内容,其它单元格增加一个输入框,反正都可以改的,供大家参考
  • 纯js无刷新控制表格排序,插入,删除,移动,导出表格增加表头等功能,测试通过。
  • 点击按钮增加行表格

    万次阅读 2017-12-26 16:24:37
    点击按钮增加行表格 做此功能我们要用到两个方法: insertRow(): insertRow() 方法用于在表格中的指定位置插入一个新。 insertCell() :insertCell() 方法用于在 HTML 表的一的指定位置插入一个空的 元素...
  • 第一个按钮点击增加表格,第二个按钮点击增加表格 第一个输入框输入要修改内容的单元格的行数,第二个输入框输入要修改内容的单元格的数,第三个输入框输入要修改的值 第三个按钮为确认按钮,将三个输入框...
  • 向 PPT 表格中添加

    万次阅读 2012-11-07 10:04:02
    若要选中多行、多或整个表格,请拖动鼠标跨越或整个表格。 若要选中,请指向的顶部边框外侧,并在指针变为向下的箭头时单击鼠标。 单击鼠标右键,然后单击快捷菜单上的“插入”或“插入”。...
  • 3,此操作在弹窗中,这个框架的弹窗每次关闭需要手动清理数据,所以需要将表格中除了标题之外的移除; 实现: 1,下拉框旁边的‘添加’按钮增加触发事件addShare()方法 var i = 0; function addShare() { ...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&... {
  • Vue 动态生成表格

    万次阅读 多人点赞 2018-08-22 21:43:57
    当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下: &lt;template&gt; &lt;div class="boxShadow"...
  • C# datagridview表格代码增加按钮

    千次阅读 2018-12-25 10:00:21
    DataGridViewButtonColumn btn2 = new DataGridViewButtonColumn(); btn2.Name = &... //设置的名称 btn2.UseColumnTextForButtonValue = true; //允许按钮上显示文字 btn2.Text = &quot;下...
  • elementui加vue.js 生成可输入表格可动态增加列并且可编辑table
  • c#操作Excel表格插入代码

    千次阅读 2018-07-17 13:42:41
    c#操作Excel表格插入代码,引用Microsoft.Office.Interop.Excel的方法,先是实现了插入空行,代码如下 object MisValue=Type.Missing; DataSet ds; Microsoft.Office.Interop.Excel.Workbook xlsWorkbook; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 137,145
精华内容 54,858
关键字:

如何增加表格的行、列