精华内容
下载资源
问答
  • 一个简单的 jquery 两个表格数据行交换数据的功能源码
  • 内容索引:脚本资源,jQuery,数据交换,高亮显示,jQuery插件 jQuery 两个表格的数据栏互相交换数据,高亮显示被选定的,双击某一行数据会交换到右侧数据栏,右侧双击后重新复位,增加TableView.delRange方法,修改...
  • 如果网页中的表格行需要按某种方式排列,则表格行交换是不可缺少的功能。查阅了若干资料,感觉实现起来有点复杂,晦涩难懂。本着把复杂事情简单化的宗旨,自己实现了。觉得可能对大家有用,因此发布出来供参考。
  • http://www.w3.org/TR/html4/loose.dtd">      Insert title here    input[type=text]{  width:30px; ... * javascript中对表格的操作:创建表格 删除 删除列 交换行 交换列  *

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
            <title>Insert title here</title>
      <style type="text/css">
       input[type=text]{
        width:30px;
       }
      </style>
      <script type="text/javascript">
       /*
        * javascript中对表格的操作:创建表格 删除行 删除列 交换行 交换列
        */
       function creatTable(){
        //获取页面中原有的table
        var oldTable = document.getElementsByTagName("table")[0];
        if(oldTable != null)
         document.body.removeChild(oldTable);
        // 获取行数和列数
        var rows = document.getElementById("creatRows").value;
        var cols = document.getElementById("creatCols").value;
        document.getElementById("creatRows").value = "";
        document.getElementById("creatCols").value = "";
        
        //创建Table标签,设置属性
        var table = document.createElement("table");
        table.setAttribute("border", "1");
        table.setAttribute("align", "center");
        table.setAttribute("width", "50%");
        table.setAttribute("cellpadding", "5");
        table.setAttribute("cellspacing", "0");
        //alert(table);
        
        //创建Tbody,添加到table中
        var tbody = document.createElement("tbody");
        table.appendChild(tbody);
        
        for(var i = 1; i <= rows; i++){
         //创建tr,添加到tbody中
         var tr = document.createElement("tr");
         tbody.appendChild(tr);
         
         for(var j = 1; j <= cols; j++){
          //创建td,设置td的文本,添加到tr中
          var td = document.createElement("td");
          td.innerHTML = i + ", " + j;
          tr.appendChild(td);
         }
        }
        
        //将table装入body中
        document.body.appendChild(table);
        
       }
       
       function deleteRow(){
        //获取行号
        var rows = document.getElementById("deleteRows").value;
        document.getElementById("deleteRows").value = "";
        
        //获取页面中要删除的那个tr,如果不存在,给个提示
        var tr = document.getElementsByTagName("tr")[rows - 1];
        if(tr == null){
         alert("要删除的不存在!");
         return;
        }
        //将tr删除
        tr.parentNode.removeChild(tr);
       }
       
       function deleteCol(){
        //获取要删除的列数,删除后,清空text的值
        var cols = document.getElementById("deleteCows").value;
        document.getElementById("deleteCows").value = "";
        
        //获取所有的tr,删除每个tr中的cols列
        var trARR = document.getElementsByTagName("tr");
        for(var i = 0; i < trARR.length; i++){
         var td = trARR[i].childNodes[cols - 1];
         trARR[i].removeChild(td);
        }
       }
       
       function swapRow(){
        //获取要交换的行号
        var row1 = document.getElementById("swapRow1").value;
        var row2 = document.getElementById("swapRow2").value;
        document.getElementById("swapRow1").value ="";
        document.getElementById("swapRow2").value = "";
        
        //获取要交换的tr
        var trArr = document.getElementsByTagName("tr");
        var tr1 = trArr[row1 - 1];
        var tr2 = trArr[row2 - 1];
        
        //使用javascript写好的交换方法
        //tr1.swapNode(tr2);
        
        var cloneTr = tr1.cloneNode(true); //交换位置,交换会失败,替换后,会少一行
        tr2.parentNode.replaceChild(cloneTr, tr2); //???
        tr1.parentNode.replaceChild(tr2, tr1);
        
       }
       
       function swapCol(){
        // 获取要交换的列号
        var cols1 = document.getElementById("swapCol1").value;
        var cols2 = document.getElementById("swapCol2").value;
        document.getElementById("swapCol1").value = "";
        document.getElementById("swapCol2").value = "";
        
        // 获取所有TR, 循环遍历所有TR
        var trArr = document.getElementsByTagName("tr");
        for(var x = 0; x < trArr.length; x++) {
         // 获取要交换的TD
         var td1 = trArr[x].childNodes[cols1 - 1];  // 获取TR的所有子节点
         var td2 = trArr[x].cells[cols2 - 1];   // 获取TR中所有单元格
         
         // 交换
         td1.swapNode(td2);
        }
       }
      </script>
        </head>
        <body>
         创建的行数:<input type="text" id="creatRows"><br>
      创建的列数:<input type="text" id="creatCols"><br>
      <input type="button" value="创建表格" οnclick="creatTable()"><br>
      <br>
      要删除的行:<input type="text" id="deleteRows"><input type="button" value="删除行" οnclick="deleteRow()"><br>
      要删除的列:<input type="text" id="deleteCows"><input type="button" value="删除列" οnclick="deleteCol()"><br>
      <br>
      要交换的行:<input type="text" id="swapRow1">, <input type="text" id="swapRow2"><input type="button" value="交换行" οnclick="swapRow()"><br>
      要交换的列:<input type="text" id="swapCol1">, <input type="text" id="swapCol2"><input type="button" value="交换列" οnclick="swapCol()"><br>
        </body>
    </html>

    展开全文
  • function toggleDisplay(me){if (me.style.display=="inline"){ me.style.display="none";...}}今天上班的时候,同事小Z座位上发问,她想把Excel表格里行和列数据的位置交换一下,谁能帮她一下。我就正好用
    <script language=jscript> function toggleDisplay(me){ if (me.style.display=="inline"){ me.style.display="none"; } else { me.style.display ="inline"; } } </script> 
    

    今天上班的时候,同事小Z在座位上发问,她想把Excel表格里行和列数据的位置交换一下,谁能帮她一下。我就正好用她的例子把这个技巧讲一下(这个操作有个专有名词叫转置,Transpose)。

    数据示例——

    上海出发到各城市的机票价格

    北京   济南   青岛   沈阳
    1050    900   1200   1350

    她想要的结果:

    北京  1050
    济南   900
    青岛  1200
    沈阳  1350

    先讲用菜单命令的方法:

    1. 选择并复制要进行行列交换的单元格范围。
    2. 右键单击第一个目标单元格(也就是要粘贴的数据的最左上角的单元格),选择 Paste Special。(也可以从菜单选择 Edit—>Paste Special,)
    3. 在 Paste Special 对话框里,选择 Transpose 并点击OK
    Transpose 选项在对话框的右下角。

    The Paste Special dialog box

    还有一种方法是用Transpose函数。不过还是上面讲的“特殊粘贴”方法简单。

    TRANSPOSE函数可以把垂直的单元格返回成水平的单元格,反之亦然,把水平的单元格返回成垂直的单元格。TRANSPOSE必须作为一个数组函数输入。

    语法:TRANSPOSE(array)
    array可以是一个数组,也可以是表单上的单元格范围。

    我还是用上面的数据为例,因为要用到单元格范围的引用,我把例子重写一下,放在Excel表单里看。

     ABCD
    1北京济南青岛沈阳
    21050 9001200 1350

    选择并复制A1到D2的单元格,选择转置后要放置的区域,比如B6到C9,关键是目标区域要和源区域一样大。源区域有4列,目标区域就要有4行,源区域有2行,目标区域就要有2列。选择了目标区域后,输入"=TRANSPOSE(A1:D2)",Excel会自动把函数显示在目标区域左上角的单元格里,按 CTRL+SHIFT+ENTER,大功告成。

    数组函数在输入的时候有些技巧。比如没有选定范围,只选定了一个单元格输入函数,按CTRL+SHIFT+ENTER后,只显示左上角一个单元格的数据。为了显示全部数据,以输入函数的单元格为左上角顶点,选择跟源区域对应的区域,按F2,再按CTRL+SHIFT+ENTER,数据就全部显示了。

    展开全文
  • Excel两行交换及两列交换,快速互换相邻表格数据的方法
                   

    转载自:http://mtoou.info/excel-lianghang/

    经常使用办公软件的人可能有遇到过需要将 Excel 相邻两行数据相互交换的情况,需要怎么弄才最方便呢?

    您还是像大家通常所做的那样先在 Excel 文件相应位置插入一个新的空白行然后在复制粘贴数据然后删除原来那行数据的方法么?

    要想在 Excel 中交换相邻两行数据,可以借助 Shift 键快速实现。

    例如需要交换第 4 行和第 5 行的数据,那么您需要先选中第 4 行,然后把鼠标指向第4行的上边缘,

    当指针变为双十字箭头(即移动指针)时,按住 Shift 键,同时按住鼠标左键向下拖动鼠标。

    在拖动的过程中,会出现一条虚线,当虚线到达第 5 行下边缘的实惠,屏幕上会出现 “6:6” 的提示。

    此时松开鼠标左键即可完成对第 4、5 两行数据的交换。

    而且这个方法对交换左右相邻两行数据同样适用哦。

               
    展开全文
  • swing的table可以通过setUI(? extends BasicTableUI )这方法来实现对表的外观的一些控制,如下代码实现了简单的例子: 1.测试类: import java.awt.Dimension; import java.awt.Toolkit; import javax.swing....

    swing里的table可以通过setUI(? extends  BasicTableUI )这个方法来实现对表的外观的一些控制,如下代码实现了简单的例子:

    1.测试类:


    import java.awt.Dimension;
    import java.awt.Toolkit;
    import javax.swing.JFrame;
    import javax.swing.JScrollPane;
    public class DragTableTest extends JFrame {
    /**
     * table拖拽交换数据样例
     */
    private static final long serialVersionUID = 1L;
    private DragTable table= null;
    String [] header = {"ID","name","score"};
    Object [][] data  = {{1,"贾巴尔",38387},{2,"马龙",36928},{3,"kobe",32331},{4,"jordan",32292},{5,"张伯伦",31419}};
    public DragTableTest () {
    initView();
    setLocalCenter();
    }
    public static void main(String[] args) {
    DragTableTest tst = new DragTableTest();
    tst.setVisible(true);
    }
    private void initView (){
    this.setSize(new Dimension(400,400));
    this.setTitle("可拖拽换行table:");
    JScrollPane  pan = new JScrollPane(getTable());
    this.getContentPane().add(pan);
    this.setDefaultCloseOperation(EXIT_ON_CLOSE);
    }
    private DragTable getTable(){
    if(table == null){
    table = new DragTable();
    table.setModel(new DragTableModel(data,header));
    table.setUI(new DragDropRowTableUI());
    }
    return table;
    }
    
    /**
     * 界面居中
     */
    private void setLocalCenter(){
    Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
    int screenWidth = screenSize.width;
    int screenHight = screenSize.height;
    this.setLocation((screenWidth - this.getWidth()) / 2,
    (screenHight - this.getHeight()) / 2);
    }
    }
    
    2.在这里自定义的tableUI如下:
    import java.awt.Graphics;
    import java.awt.Rectangle;
    import java.awt.event.MouseEvent;
    import javax.swing.JComponent;
    import javax.swing.event.MouseInputListener;
    import javax.swing.plaf.basic.BasicTableUI;
    import javax.swing.table.TableModel;
    
    
    public class DragDropRowTableUI extends BasicTableUI {
     /**
      * @author zhen.p
      */
     private boolean draggingRow = false;
     private int startDragPoint;
     private int dyOffset;
     TableModel model=null;
        protected MouseInputListener createMouseInputListener() {
            return new DragDropRowMouseInputHandler();
        }
    
        public void paint(Graphics g, JComponent c) {
    super.paint(g, c);
    
    
    if (draggingRow) {
    g.setColor(table.getParent().getBackground());
    Rectangle cellRect = table.getCellRect(table.getSelectedRow(), 0,
    false);
    g.copyArea(cellRect.x, cellRect.y, table.getWidth(),
    table.getRowHeight(), cellRect.x, dyOffset);
    
    
    if (dyOffset < 0) {
    g.fillRect(cellRect.x, cellRect.y
    + (table.getRowHeight() + dyOffset), table.getWidth(),
    (dyOffset * -1));
    } else {
    g.fillRect(cellRect.x, cellRect.y, table.getWidth(), dyOffset);
    }
    }
        }
    
    
        class DragDropRowMouseInputHandler extends MouseInputHandler {
    
    
    public void mousePressed(MouseEvent e) {
    super.mousePressed(e);
    startDragPoint = (int) e.getPoint().getY();
    }
    
    
    public void mouseDragged(MouseEvent e) {
    int fromRow = table.getSelectedRow();
    if (fromRow >= 0) {
    draggingRow = true;
    int rowHeight = table.getRowHeight();
    int middleOfSelectedRow = (rowHeight * fromRow)
    + (rowHeight / 2);
    int toRow = -1;
    int yMousePoint = (int) e.getPoint().getY();
    
    
    if (yMousePoint < (middleOfSelectedRow - rowHeight)) {
    // Move row up
    toRow = fromRow - 1;
    } else if (yMousePoint > (middleOfSelectedRow + rowHeight)) {
    // Move row down
    toRow = fromRow + 1;
    }
    
    
    if (toRow >= 0 && toRow < table.getRowCount()) {
    model = table.getModel();
    if(model instanceof DragTableModel) {
    //用于交换tableModel中数据的顺序,以供拖拽至后数据交换位置显示
    Object[][] data = ((DragTableModel) model).getData();
    Object[][] listresult = swapObjectList(data, fromRow, toRow);
    ((DragTableModel) model).setData(listresult);
    }
    table.setRowSelectionInterval(toRow, toRow);
    startDragPoint = yMousePoint;
    }
    dyOffset = (startDragPoint - yMousePoint) * -1;
    table.repaint();
    }
    }
    
    
            public void mouseReleased(MouseEvent e){
             super.mouseReleased(e);
             draggingRow = false;
             table.repaint();
            }
        }
        private Object[][] swapObjectList(  Object[][] origin,int fromRow,int toRow ){
        Object [] mid = new Object [origin[0].length];
        mid = origin[fromRow];
        origin[fromRow] = origin[toRow];
        origin[toRow] = mid ;
    return origin;
        }
    }
    
    3.自定义的table:
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    
    
    import javax.swing.JTable;
    
    
    
    
    public class DragTable extends JTable  implements  ActionListener{
    
    
    /**
    * table
    */
    private static final long serialVersionUID = 1L;
    public DragTable () {
    
    }
    @Override
    public void actionPerformed(ActionEvent e) {
    // TODO Auto-generated method stub
    
    }
    
    
    }
    4.自定义的tablemodel:
    import javax.swing.table.AbstractTableModel;
    
    
    
    
    public class  DragTableModel extends AbstractTableModel{
    
    
    /**
    * table model
    */
    private static final long serialVersionUID = 1L;
    private Object[][] data = null;
    public Object[][] getData() {
    return data;
    }
    public void setData(Object[][] data) {
    this.data = data;
    }
    private String [] header = null;
    public DragTableModel (Object[][] data ,String [] header){
    this.data = data;
    this.header = header;
    }
    public int getRowCount() {
    return data.length;
    
    }
    
    
    @Override
    public int getColumnCount() {
    return header.length;
    }
    
    
    
    @Override
    public String getColumnName(int column) {
    return header[column];
    }
    @Override
    public Object getValueAt(int row, int column) {
    if(row >= 0){
    switch(column){
      case 0:
      return data[row][0];
      case 1:
      return data[row][1];
    case 2:
      return data[row][2];
      
    }
    }
    return null;
    }
    }


    展开全文
  • 我见过一个非常详细的教程,它会把表格里的每一行的高度Y坐标计算出来,换言之,都时是比较e.pageX是否[rowTop,rowBottom]区间之内。但这也带来第二问题,有多少就有多这样的区间。于是解法就变成取事件源...
  • 可以交换同一不同列的内容,支持IE和chrome,火狐的事件和坐标计算兼容性比较麻烦暂未处理
  • vue element-ui表格行拖拽

    万次阅读 热门讨论 2018-05-16 11:07:13
     但vuedraggable这实现有一个坑点就是要求,要拖动项必须是其标签的第个子集。   但element-ui的表格,里面嵌套了很多div,如果用vuedraggable这就无法达到其效果了。   基于此,我参考vuedraggable,...
  • 交换二维表格的表头

    2011-11-22 10:37:40
    Table格式的二维表格 纵向横向表头互换,支持跨跨列
  • 项目开发中需要用到一个拖动交换表格的功能,上网搜到雅虎的一个控件,结果简单的一个拖动交换行,就要引入七八js library,太麻烦了。就自己综合网上资源写了一个可兼容IE,firefox,Chrome,Safari和Opera等主流...
  • EXCEL如何行与列互换转置表格

    千次阅读 2016-11-07 16:35:30
    利用的是EXCEL选择性粘贴功能 生活中我们出于需要,要转化行列的次序,EXCEL可以很简单的完成 ...选中表格复制 ...所需要转置的地方右键 【选择选择性粘贴】 再选转置选项 ok 效果如图
  • Vue 表格
  • 表格行上下移动

    2012-09-18 11:46:45
    表格行上下移动 function cleanWhitespace(element) {  //遍历element的子结点  for (var i = 0; i var node = element.childNodes[i];  //判断是否是空白文本结点,如果是,则删除该结点  if (node....
  • var mytable = null; window.onload = function () { mytable = new CTable("tbl", 10); //随机创建10行表格 } Array.prototype.each = function (f) { //数组的遍历 for
  • javascript 动态添加表格行

    千次阅读 2009-09-01 16:01:00
    javascript 动态添加表格行动态添加表格行 文/Ray表格部分代码如下:第行第二行第三行动态添加表行的javascript函数如下:function addRow(){//添加行var newTr = testTbl.insertRow();//添加两列var newTd0 = ...
  • 这里讨论的是onenote而不是onenote2016,两者是有区别的。 由于网上许多人找不到OneNote表格插入的方法,这里提供种解决方案。...同样当光标停留最后一行时,敲回车,这时就可以实现的插入   如果想
  • 源码:添加jquery1.3.2.js既可以使用http://download.csdn.net/detail/mini_jike/9477374(脚本... ...head> meta charset="UTF-8"> title>jQuery表格操作添加、删除和动态移动丨芯晴网页特效title> script langua
  • 1. excel中怎样将两列数据整体交换位置1、...4、拖动鼠标,此时注意在表格界面处会出现一个虚线,这是表格移动后的位置。5、继续移动鼠标,当虚线由变成列,且需要互换的数据列侧时,放开鼠标。6、此时EX...
  • jquery动态表格,动态添加表格行

    千次阅读 2013-05-09 17:44:08
    效果图:(打包下载) Html: html> head>  title>jquery表格操作title>  script language="javascript" src="jquery.table.tr.js">script>  style type="text/css">  table  {  bord
  • datagridview内部拖动,也就是拖动交换行,参照别人博客,自己改了些代码,放上来分享~~,大家共同研究共同进步
  • jquery表格增加删除操作

    千次阅读 2011-08-20 16:39:55
    jQuery表格操作添加、删除和动态移动丨芯晴网页特效丨CsrCode.Cn ...添加一行 删除一行 上移 下移 序号步骤名称步骤描述相关操作 var currentStep=0; var max_line_num=0; funct
  • 我是JAVA菜鸟,目前已知的数组函数有Arrays的copyOf和copyOfRange,binarySearch检索,我较熟的有:冒泡排序,for循环遍历数组,foreach遍历数组,求前辈们教教我怎么实现标题的提问,表示完全不懂。
  • JS实现的表格行上下移动操作小案例

    千次阅读 2018-04-07 10:44:42
    //如果不是第行,则一行交换顺序 var _node = _row.previousSibling; while(_node && _node.nodeType != 1){ _node = _node.previousSibling; } if(_node){ swapNode(_row,_node); } } function move...
  • QTableWidget交换的数据,实现按键数据上/下移预备操作函数:得到需要交换的两的数据上移,下移按键的程序上移下移 预备操作 QT designer中添加一个tableWidget QT designer中添加两PushButton 双击...
  • jquery操作表格上下移动

    千次阅读 2013-04-18 15:17:51
    添加一行 删除一行 上移 下移 序号步骤名称步骤描述相关操作 var currentStep=0; var max_line_num=0; function add_line(){ max_line_num=$("#content tr:last-child").children("td").html...
  • ![vue怎么实现拖拽表格的单元,换位置](https://img-ask.csdn.net/upload/201912/18/1576661579_43512.png) #### 如图举例子:比如将第三拖到第一行,那么其他就顺位下移

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,576
精华内容 14,230
关键字:

在一个表格里行与行如何交换