精华内容
下载资源
问答
  • 动态表格,功能为点击添加按钮,表格增加一行并给其name属性赋予的值,点击删除,自动删除这一行,具体实现如下
  • 网页上实现类似Excel的效果,数据滚动条拖动固定第一行和第一列,附代码备注,一目了然
  • 页面显示表格表格的首行冻结,首冻结,最后一行也冻结,实现数据查看和合计查看的效果。DemoDemoDemoDemo
  • 我们使用Microsoft Office excel制作表格时,如果表格很长,而我们拉动表格时,又想保持头一行或头几行不动,这时我们就可以通过锁定表格的方法来解决了。一、只想保持第一行(即表头)不动1.打开Excel文件如下图2...

    1c7537085eaaf984a0ab63f96f0713ea.png

    我们在使用Microsoft Office excel制作表格时,如果表格很长,而我们在拉动表格时,又想保持头一行或头几行不动,这时我们就可以通过锁定表格的方法来解决了。

    一、只想保持第一行(即表头)不动

    1.打开Excel文件

    如下图

    fcd39c2ad5ccd24c4daa6a9ea763b9cf.png

    2.在菜单栏选择“视图”

    如下图

    1c4bb5caed19adf2b539ab2415ccee7b.png

    3.在视图栏选择“冻结窗口”项,如下图:

    a0433066fb0b86e673117409affef5a3.png

    4.在弹出的窗口里选取“冻结首行”项,即可将表格的第一行冻结,如下图:

    331221da7c582739d44bd9dd070417e0.png

    这时我们拉动表格旁的滑板往下拉时,表格的第一行会保存在画面里,如下图所示:

    b11f217a037b3f4574010a52d3aa81de.png

    注意,想取消锁定第一行时,只需按刚才的顺序,依次选择“视图”->“冻结窗口”,这时会看见原先的“冻结拆分窗格”已变成了“取消冻结窗格”,点击它就能消除对表格第一行的锁定,如下图所示:

    e2cf5fd3c191bb016894a9cdaa133f9d.png

    二、只想保持第一列不动

    方法和上面类似,打开新Excel文件后,在菜单栏依次选择“视图”->“冻结窗口”后,再选择“冻结首列”即可,见下图:

    90f15e4d02612086c6de8a8b04fdbe1c.png

    注意,想取消锁定第一列时,只需按刚才的顺序,依次选择“视图”->“冻结窗口”,这时会看见原先的“冻结拆分窗格”已变成了“取消冻结窗格”,点击它就能消除对表格第一列的锁定。

    三、若想保持多行、多列在表格滚动时不动该怎么处理?

    例如在Excel表格文件中,除了表格头部外,还有表格标题栏,如下图:

    ea36f8e45f590a9b5d61b3ae1e183b4a.png

    此时若想锁定上图所指的行和列,则需在打开Excel文件后,先将光标移至第3行的B列,如下图所示:

    0c537beb6c869d77249f9a7995171b7b.png

    再至菜单栏依次选择“视图”->“冻结窗口”->“冻结拆分窗口”即可,如下图所示:

    9c604e37b9841996f6c2d068e7bb7230.png

    点击“冻结拆分窗口”后,任意拖动滚动条,“标题栏”、“表头栏”和“序号”列始终保持显示,如下图所示:

    eea150e5b413cd1ef5ea47382e328e7c.png

    注意,若想取消对指定行列的锁定,只需按刚才的顺序,依次选择“视图”->“冻结窗口”,这时会看见原先的“冻结拆分窗格”已变成了“取消冻结窗格”,点击它就能消除对表格中指定行、列的锁定,如下图所示:

    64242422bfe706258b3c88b98d0e16ee.png

    介绍完毕

    d490bf0e60fd89723239e8a7cb7098a7.png

    展开全文
  • 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二、原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加...
  • 项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列,学习jQuery的过程中,自己试着网上找寻教程,发现...目前实现动态增加 删除最后一行与最后一列,获取表格内填写的input数据(最简洁的代码实现)
  • 最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击“添加输入框”按钮时,就会自动添加一行 下面我们来一下代码实现(把...

    最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现:
    在这里插入图片描述
    当点击“添加输入框”按钮时,就会自动添加一行
    在这里插入图片描述

    下面我们来一下代码实现(把实际项目中的HTML代码简化了,其他功能可自己加)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        table.table input{ /*可输入区域样式*/
    width:100%;
    height: 100%;
    border:none; /* 输入框不要边框 */
    font-family:Arial;
    }
    </style>
    </head>
    <body>
    <br><br>
    <center><h3>Jquery实现表格动态增加一行,删除一行</h3></center>
    <table class="table" border="1" align="center">
        <thead>
        <tr>
            <th>序号</th>
            <th>配置要求</th>
            <th>主要技术参数</th>
        </tr>
        </thead>
        <tbody>
        <tr id="clo">
            <td class="td">1</td>
            <td> <input placeholder="添加配置要求" /></td>
            <td> <input placeholder="添加主要技术参数" /></td>
        </tr>
        <tr>
            <td class="td">2</td>
            <td> <input placeholder="添加配置要求" /></td>
            <td> <input placeholder="添加主要技术参数" /></td>
        </tr> 
        </tbody>
    </table>
    <button onclick="fun()">增加一行</button>
    <button onclick="del()">删除一行</button>
    <script type="text/javascript">  
    	//前面的序号1,2,3......                 
        var i = 1;
        $(".td").each(function(){
            $(this).html(i++);
        })
    	//添加一行
        function fun(){
            var $td = $("#clo").clone();       //增加一行,克隆第一个对象
            $(".table").append($td);
            var i = 1;
            $(".td").each(function(){       //增加一行后重新更新序号1,2,3......
            $(this).html(i++);
            })
            $("table tr:last").find(":input").val('');   //将尾行元素克隆来的保存的值清空
        }
    	//删除一行
        function del(){
            $("table tr:not(:first):not(:first):last").remove();//移除最后一行,并且保留前两行
        }
    </script>
     </body> 
    </html>
    

    该代码的截图:
    在这里插入图片描述
    在这里插入图片描述
    简单易于理解,这里不做其他解说了

    展开全文
  • id="names" name="names"> 数量:</label><input type="text" id="num" name="num"> 单价:</label><input type="text" id="price" name="price"> 添加</button> <hr> <script> var bn,inputs,table,...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table
            {
               border-collapse: collapse;
                width: 800px;
            }
            td,th{
                height: 30px;
                border: 1px solid #000000;
                line-height: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <label for="ids">id:</label><input type="text" id="ids" name="ids"><br>//for 关联name
        <label for="icon">图标:</label><input type="text" id="icon" name="icon"><br>
        <label for="names">名称:</label><input type="text" id="names" name="names"><br>
        <label for="num">数量:</label><input type="text" id="num" name="num"><br>
        <label for="price">单价:</label><input type="text" id="price" name="price"><br>
        <button id="bn">添加</button>
        <hr>
        <script>
           var bn,inputs,table,labels;
            init();
            function init() {
                bn=document.getElementById("bn");
                inputs=document.querySelectorAll("[type=text]");
                labels=document.getElementsByTagName("label");
                bn.addEventListener("click",clickHandler);//给按钮添加侦听
                createTable();
            }
            
            function createTable() {
                table=document.createElement("table");
                var tr=document.createElement("tr");
                var th0=document.createElement("th");
                tr.appendChild(th0);
    
                var input=document.createElement("input");
                input.type="checkbox";
                input.addEventListener("click",checkHandler);
                th0.appendChild(input);//把多选框加入th0
                for(var i=0;i<labels.length;i++){
                    var th=document.createElement("th");
                    th.textContent=labels[i].textContent.slice(0,-1);
                    tr.appendChild(th);
                }
                var th1=document.createElement("th");
                th1.textContent="删除";
                tr.appendChild(th1);
                table.appendChild(tr);
                document.body.appendChild(table)
            }
    
            function clickHandler(e) {
                var tr=document.createElement("tr");
                var obj={selected:false};
                for(var i=0;i<inputs.length;i++){
                    obj[inputs[i].name]=inputs[i].value;
                }
                obj.del="删除";
                for(var prop in obj){
                    var td=document.createElement("td");
                    if(prop==="selected"){
                        var input=document.createElement("input");
                        input.type="checkbox";
                        td.appendChild(input);
                        input.addEventListener("click",checkHandler);
                    }else if(prop==="del"){
                        var delBn=document.createElement("button");
                        delBn.textContent="删除";
                        td.appendChild(delBn);
                        delBn.addEventListener("click",delHandler);
                    }else if(prop==="icon"){
                        var img=new Image();
                        img.src=obj.icon;
                        td.appendChild(img);
                    }else{
                        td.textContent=obj[prop];
                        console.log(prop)
                    }
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
    
            function checkHandler(e) {
                var checks=document.querySelectorAll("[type=checkbox]");
                if(this===checks[0]){
                    for(var i=1;i<checks.length;i++){
                        checks[i].checked=this.checked;
                    }
                    return;
                }
                var bool=true;
                for(var j=1;j<checks.length;j++){
                    if(!checks[j].checked){
                        bool=false;
                        break;
                    }
                }
                checks[0].checked=bool;
            }
    
            function delHandler(e) {
                var tr=this.parentElement.parentElement;
                tr.remove();
            }
        </script>
    </body>
    </html>
    
    展开全文
  • html代码:   jquery代码,记得引文件路径: ... * 编辑表格 ...* 新增一行 */ addRow:function(){ $mtr = $("#amsTbody tr:last").clone(); $mtr.each(func


    html代码:

    <div>

    <input type="button" value="添加一行" οnclick="editTable.addRow()"/>
    <input type="button" value="删除一行" οnclick="editTable.delRow()"/>
    <input type="button" value="添加一列" οnclick="editTable.addCol()"/>
    <input type="button" value="删除一列" οnclick="editTable.delCol()"/>
    </div>


    <table border="5">
    <tbody id="amsTbody">
    <tr class="tdSet">
    <td class="tdSet"><input type="text" /></td>
    <td class="tdSet" ><input type="text" /></td>
    </tr>
         </tbody>

    </table>


    jquery代码,记得引文件路径:


    /**
     * 编辑表格
     */
    var editTable = {
    /**
    * 新增一行
    */
    addRow:function(){
    $mtr = $("#amsTbody tr:last").clone();
    $mtr.each(function(i, e){
    $(e).find("input").val(i);
    });

    $("#amsTbody tr:last").after( $mtr );
    },
    /**
    * 删除一行
    */
    delRow:function(){
    if($("#amsTbody tr").length <= 2){
    return;
    }
    $("#amsTbody tr:last").remove();
    },

    /**
    * 新增一列
    */
    addCol:function(){
    $col = $("<td class='tdSet'><input type='text' /></td>");
    $("#amsTbody tr").append($col);
    },
    /**
    * 删除一列
    */
    delCol:function(){
    alert($("#amsTbody tr").eq(0).find("td").length);
    if(  $("#amsTbody tr").eq(0).find("td").length <= 2 ){
    return;
    }
    alert($("#amsTbody tr").length);
    $("#amsTbody tr td:last-child").remove();
    },
    };

    展开全文
  • 选中该列, 然后,编辑栏中输入你想要输入的数据,再按下CTRL+回车键, 那么,这一列都会显示相同数据 ...选中这一列 然后选中的状态下输入你要的东西 再按Ctrl+Enter            ...
  • 需求:表格里面的某一栏或则某一列,某一单元格等需要动态设置css样式 :cell-class-name=“cell” <el-table :data="tableData3" style="width: 100%" :cell-class-name="cell"> <el-table-column fixed...
  • 2,点击每一行之后。要跳转之前。加一个判断。isClick为true就不跳转。 关键代码: 完整代码: 我创建的试卷列表:包含了所有做过和没有做过的试卷MyExam !search || data.name.toLowerCase().includes(search....
  • el-table中的每显示的是数字,需要在表格的最下面一行添加汇总行,计算每的总和。 el-table自带是否显示汇总行这个属性。 注: 博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...
  • java 导出一行的excel表格

    千次阅读 2018-01-29 16:19:09
    一行 Row row = sheet.createRow( 0 ) ; Cell cell = row.createCell( 0 ) ; HSSFRichTextString text = new HSSFRichTextString(headers[ 0 ]) ; cell.setCellValue(text) ; cell = row....
  • 目标:将表中的每一列都乘以最后一列,例如上图,将U-Y中的每一列乘以AC列。 第一步:复制AC列 第二步:选择U-Y中的每一列,右击选择性粘贴,打开选择性粘贴对话框,选择运算中的乘即可,如图二。 ...
  • 刚学习pandas,想给个原有的excel表格上实现添加新数据,但是由于刚学,不熟悉dataframe的特性,本来想按照写入json转csv的方式对数据进行添加,那就意味着要对原先表格的数据进行提取再series合并,最后再写入...
  • html中实现table表格一行

    千次阅读 2020-03-22 12:45:05
  • 点击添加一列后: HTML代码如下: <el-table :data="tableDatas" style="width: 100%"> <el-table-column v-for="(col,i) in cols" :prop="col.prop" :key="i"> </el-table-column> </...
  • 实现表格一列固定

    千次阅读 2018-05-21 11:51:30
    这个功能的难点在于:如果把第一列表格中抽出,无法对齐。 (3) 已有解决方案 网上有很多解决方案: 固定表格高度,只能显示一列。将第一列抽出固定最左。 js动态计算各高度 对于这些方案要不过于繁琐...
  • js实现动态增加和删除表格。实例 js实现动态增加和删除表格。实例
  • JQuery 获取表格table所有一列

    千次阅读 2019-09-24 15:53:32
    main_table 是表ID $("#main_table tr").find("td:eq(0)") 转载于:https://www.cnblogs.com/xiaonangua/p/11005190.html
  • 前言 最近做一个上传文件列表,列表中要显示上传进度,文件大小等等信息,还可以进行取消上传,重新上传,预览文件以及删除文件的操作。 问题:删除文件时如何隐藏表格的该行数据 题外话:或许你们会说...隐藏一行
  • WORD中的表格如何快捷键添加一行

    千次阅读 2021-03-30 09:58:14
    alt+a+i+a添加一行以后,按F4就可以一直往下添加。 或者在表格上,鼠标右键,选择添加一行后,按F4,也可以一直往下添加
  • 复制表格(table)里的一列 js代码 可复制表格里的任何一列
  • https://jingyan.baidu.com/article/75ab0bcbb75f0cd6864db290.html
  • 手动添加表格 代码添加表格
  • 数据拉取过来之后回调事件done里根据数据来做个处理: table.render({ elem: "#test", // id: "table_cell_data", url: "http://localhost:3000/all", toolbar: "#toolbarDemo", //指向自定义工具栏模板...
  • var tableIns = table.render({ elem: '#table' , skin: 'row' //边框风格 , even: true //开启隔行背景 , url: '/index/conf_manage/recorde.html?id={$id}' , cols: [cols] , page: true ...
  • 如何定住表格的第一列和第一行

    千次阅读 2016-02-03 17:45:13
    如何定住表格的第一列和第一行 #页面布局如何将表格的第一列定住将表格的第一列定住,表格的右侧滚动方法一 .outer { position:relative; } .inner { margin-left: 第一列的宽度; overflow: hidden; overflow...
  • js动态表格添加一行删除一行保存一行

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 282,749
精华内容 113,099
关键字:

如何在表格一列增加一行