精华内容
下载资源
问答
  • 首先去layui官网下载教程示例,在项目中...第一: 将jsp语句写成字符串形式,使用document.write()方式输出: 代码如下: var str = ""; str += "<table class='layui-table'>"; for (va...

    首先去layui官网下载教程示例,在项目中加载layui.css,layui.js,JQuery.js

    第一种:

    将jsp语句写成字符串的形式,使用document.write()方式输出:

    代码如下:

     var str = "";
         str += "<table class='layui-table'>";
    
                for (var i = 0; i < 6;i++)
             {
                str += "<tr>";
                    for(var j = 0; j < 24;j++){
                        str += " <td>" + (i + j) + "</td>";
                    }
                str += "</tr>";
            }
        str += "</table>";
    
        document.write(str);

    效果如图所示:

    第二种,创建元素对象:

    首先用数组保存变量名,再通过数组保存的变量名来创建元素对象

    代码如下:

     var tab = document.createElement("table");
          tab.className = "layui-table";
          document.body.appendChild(tab);
    
          var body = document.createElement("tbody");
          tab.appendChild(body);
    
          //定义存放元素名称的二维数组
          var tabletr = new Array(6);
          for(var i=0;i<6;i++){
              tabletr[i]=new Array();
                    for(var j=0;j<24;j++){
                        tabletr[i][j]= i + j;
                    }
          }
    
          for(var i = 1;i<7;i++){
              tabletr[i] = document.createElement("tr");
              body.appendChild(tabletr[i]);
    
              for(var j = 1;j<25;j++){
                  tabletr[i][j] = document.createElement("th");
                  tabletr[i].appendChild(tabletr[i][j]);
              }
          }

    效果如图所示:

     

    转载于:https://www.cnblogs.com/Liu30/p/7229641.html

    展开全文
  • js如何动态创建表格(两种方法) 一、总结 一句话总结: 1、方法一:写好创建表格的html代码,将之赋值给div的innerHTML。 2、方法二、直接用创建好的table元素的方法insertRow和insertCell来实现。 3、指定...

    js如何动态创建表格(两种方法)

    一、总结

    一句话总结:

    1、方法一:写好创建表格的html代码,将之赋值给div的innerHTML。

    2、方法二、直接用创建好的table元素的方法insertRow和insertCell来实现。

    3、指定行列创建表格:通过循环。

     

    1、table元素的动态(js中)常用属性有哪些?

    解答:tab.width=500;  tab.border=2;。

    2、如何得到某个div的第一个table?

    解答:var ta=div1.getElementsByTagName('table')[0]。

    3、html中元素如何移除自己?

    解答:先找父节点,然后移除父节点的子节点。ta.parentNode.removeChild(ta)。

    4、insertRow(i)是谁的方法?

    解答:table的。

    5、insertCell(j)是谁的属性?

    解答:row的,tab.rows[i].insertCell(j).innerHTML=i+''+j;。

    6、如何访问表格中的第i行的第j列的元素?

    解答: tab.rows[i].cells[j].style.background='green'。

    7、如何通过创建html语句的方式给div加表格?

    解答:var tab='<table border=1 width=500">'  tab+='</table>';  div1.innerHTML=tab。

     

     

    二、js如何动态创建表格(两种方法)

    1、创建指定行,列的表格的案例说明

      • 实例描述:

        根据用户输入数值,创建指定行,列的表格

        案例006/007分别采用不同的思路实现同样的功能

     

    2、表格相关的属性和方法

    1.1 Table 对象集合
    • cells[] 返回包含表格中所有单元格的一个数组。

      语法:tableObject.cells[]

    • rows[] 返回包含表格中所有行的一个数组。

      rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定义的所有行。

    • tBodies[] 返回包含表格中所有 tbody 的一个数组。

      注:不常用

    1.2 Table 对象方法
    • createCaption() 为表格创建一个 caption 元素。
    • createTFoot() 在表格中创建一个空的 tFoot 元素。
    • createTHead() 在表格中创建一个空的 tHead 元素。
    • deleteCaption() 从表格删除 caption 元素以及其内容。
    • deleteRow() 从表格删除一行。
    • deleteTFoot() 从表格删除 tFoot 元素及其内容。
    • deleteTHead() 从表格删除 tHead 元素及其内容。
    • insertRow() 在表格中插入一个新行。
    1.3 Table 对象常用属性
    • frame 设置或返回表格的外部边框。
    • rules 设置或返回表格的内部边框(行线)。
    • caption 对表格的 caption 元素的引用。
    • cellPadding 设置或返回单元格内容和单元格边框之间的空白量。
    • cellSpacing 设置或返回在表格中的单元格之间的空白量。
    • summary 设置或返回对表格的描述(概述)。
    • tFoot/tHead 返回表格的 TFoot /tHead对象。如果不存在该元素,则为 null。
    • border/width/id......
    1.4 TableRow 对象
      • TableRow 对象方法
        • deleteCell() 删除行中的指定的单元格

          语法:tablerowObject.deleteCell(index)

        • insertCell() 在一行中的指定位置插入一个空的 td 元素。

          tablerowObject.insertCell(index)

          返回值:一个 TableCell 对象,表示新创建并被插入的 元素。

      • TableRow 对象属性
        • vAlign 设置或返回在行中的数据的垂直排列方式。

          语法:tablerowObject.vAlign=top|bottom|middle|baseline

        • rowIndex 返回该行在表中的位置。

          语法:tablerowObject.rowIndex

        其他:align/innerHTML/id......

    1.5 TableCell 对象
      • TableCell 对象属性
        • abbr 设置或返回单元格中内容的缩写版本。
        • axis 设置或返回相关单元格的一个逗号分隔的列表。
        • cellIndex 返回单元格在某行的单元格集合中的位置。
        • colSpan 单元格横跨的列数。
        • rowSpan 设置或返回单元格可横跨的行数。
        • vAlign/width/id/align......

     

    3、案例截图

     

     

     

     

    4、代码

    代码1:
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6     <style type="text/css">
     7     </style>
     8 </head>
     9 <body>
    10     <h3>动态创建表格1</h3>
    11     行数 <input type="text" value="5" id="rows">
    12     列数 <input type="text" value="5" id="cols">
    13     <input type="button" value="创建表格" onclick="creatTab()">
    14     <div id="div1"></div>
    15     <script>
    16     function creatTab(){
    17         rows=document.getElementById('rows').value
    18         cols=document.getElementById('cols').value
    19         div1=document.getElementById('div1')
    20         // alert(rows+'\n'+cols)
    21         var tab='<table border=1 width=500">'
    22         for(var i=0;i<rows;i++){
    23             tab+='<tr>'
    24             for(var j=0;j<cols;j++){
    25                 tab+="<td style='background:green'>"+i+j+"</td>"
    26             }
    27              tab+='</tr>'
    28         }    
    29         tab+='</table>';
    30         div1.innerHTML=tab
    31     }
    32     </script>
    33 </body>
    34 </html>

     

     

    代码2:
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6     <style type="text/css">
     7     </style>
     8 </head>
     9 <body>
    10     <h3>动态创建表格1</h3>
    11     行数 <input type="text" value="5" id="rows">
    12     列数 <input type="text" value="5" id="cols">
    13     <input type="button" value="创建表格" onclick="creatTab()">
    14     <div id="div1"></div>
    15     <script>
    16     function creatTab(){
    17         rows=document.getElementById('rows').value
    18         cols=document.getElementById('cols').value
    19         div1=document.getElementById('div1');
    20         var ta=div1.getElementsByTagName('table')[0]
    21         if (ta) {ta.parentNode.removeChild(ta)}
    22         var tab = document.createElement("table");
    23         tab.width=500;
    24         tab.border=2;
    25         for(var i=0;i<rows;i++){
    26             tab.insertRow(i)
    27             for(var j=0;j<cols;j++){
    28                 tab.rows[i].insertCell(j).innerHTML=i+''+j;
    29                 tab.rows[i].cells[j].style.background='green'
    30             }
    31         }
    32 
    33         document.getElementById("div1").appendChild(tab)
    34 
    35     }
    36     </script>
    37 </body>
    38 </html>

     

     

    三、测试题-简答题

    1、table元素的动态(js中)常用属性有哪些?

    解答:tab.width=500;  tab.border=2;

    2、如何得到某个div的第一个table?

    解答:var ta=div1.getElementsByTagName('table')[0]

    3、html中元素如何移除自己?

    解答:先找父节点,然后移除父节点的子节点。ta.parentNode.removeChild(ta)

    4、insertRow(i)是谁的方法

    解答:table的。

    5、insertCell(j)是谁的属性?

    解答:row的,tab.rows[i].insertCell(j).innerHTML=i+''+j;

    6、如何访问表格中的第i行的第j列的元素?

    解答: tab.rows[i].cells[j].style.background='green'

    7、如何通过创建html语句的方式给div加表格?

    解答:var tab='<table border=1 width=500">'  tab+='</table>';  div1.innerHTML=tab

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/9134967.html

    展开全文
  • 动态创建表格的方法-map Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 ​ 通过构建一个数组来存储输入的数据,再将数组中每个键值对遍历,返回一个新的数组;再用join将数据变成字符...

    对于一个前端小白来讲,节点的获取是比较难理解的,下面将根据近期的学习,来实现输入数据创建表格的效果。方法一使用了map,方法二是简单理解的createElement。

    动态创建表格的方法-map

    Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

    ​ 通过构建一个数组来存储输入的数据,再将数组中每个键值对遍历,返回一个新的数组;再用join将数据变成字符串添加进表格。

    ​ 还使用了一个API:

    insertAdjacentHTML() 将指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置。

    form.addEventListener('submit', event => {
      event.preventDefault();
      var name = nameInput.value;
      var age = ageInput.value;
      var phone = phoneInput.value;
      var birth = birthInput.value;
      const arrNew = [{
        Name: name,
        Age: age,
        Phone: phone,
        Birth: birth
      }]
      //键值数组
      console.log(arrNew);
      const newInf = arrNew.map(person => {
        if (person.Name != "" && person.Age != "" && person.Phone != "" && person.Birth != "") {
          return `<tr>
                    <td>${person.Name}</td>
                    <td>${person.Age}</td>
                    <td>${person.Phone}</td>
                    <td>${person.Birth}</td>
                    <td><a href="jacascript:;" onclick="delTr(this)">删除</a></td>
                  </tr>`
       //返回一个新数组
        } else {
          alert("添加失败")
        }
      })
      const tabInf = newInf.join('');
      tbody.insertAdjacentHTML('beforeend', tabInf);
      form.reset();
    })
    
    delTr = (obj) => {
      var tr = obj.parentNode.parentNode;
      tbody.removeChild(tr);
    }
    复制代码

    动态创建表格的方法-createElement

    ​ 这个方法简单好理解,创建对应的单元格节点,将数据赋给对应单元格文本:

    form.addEventListener('submit', function (event) {
      event.preventDefault();
      if (nameInput.value != "" && ageInput.value != "" && phoneInput.value != "" && birthInput.value != "") {
        var tr = document.createElement("tr");
        for (let i = 0; i < ths.length; i++) {
          var td = document.createElement("td");
          switch (i) {
            case 0: td.innerHTML = nameInput.value;   tr.appendChild(td);  break
            case 1: td.innerHTML = ageInput.value;    tr.appendChild(td);  break
            case 2: td.innerHTML = phoneInput.value;  tr.appendChild(td);  break
            case 3: td.innerHTML = birthInput.value;  tr.appendChild(td);  break
            case 4: td.innerHTML = "<a href='javascript:;' onclick='delTr(this)'>删除</a>";  tr.appendChild(td); break
          }
        }
        tbody.appendChild(tr);
      } else {
        alert("保存失败!")
      }
      form.reset();
    })
    复制代码

    form.reset();可以将表单中的数据重置,非常好用。

    源代码链接

    转载于:https://juejin.im/post/5ca9f6dc5188254418337017

    展开全文
  • 利用js来动态创建表格两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种方法,看下面解决和使用方法
  • 创建表格需创建数据模型,有两种数据模型DefaultTableModel和AbstractTableModel,DefaultTableModel是java_api中提供类可以直接使用,AbstractTableModel是接口需覆盖其中方法,不多,就三种方法:getRowCount...

    创建表格需创建数据模型,有两种数据模型DefaultTableModel和AbstractTableModel,DefaultTableModel是java_api中提供的类可以直接使用,AbstractTableModel是接口需覆盖其中的方法,不多,就三种方法:getRowCount(),getColumnCount(),getValueAt()。

    1.用 DefaultTableModel创建表格

    DefaultTableModel是java api中提供的类,用它可以很容易的创建表格,如创建4行3列的表格:

    javax.swing .table.DefaultTableModel dtm = newjavax.swing .table.DefaultTableModel(4,3);

    javax.swing.JTable jt = new javax.swing.JTable(dtm);

    好了表格创建好了,只需把 jt 加入窗口就可使用了。其他一些对表格的操作java api已经提供,可以直接查java api。

    2.用 AbstractTableModel 创建表格

    用AbstractTableModel创建表格需要写一个类实现接口,类中需要包含一个二维数组,二维数组中的内容就是表格中的内容,如:

    public class TableValues extends AbstractTableModel{

    public int[][] values = {{1,2,3,4,5},{2,3,4,5,6},{3,4,5,6,7},{4,5,6,7,8}}; //二维数组

    public int getRowCount() { //覆盖getRowCount(),返回行数

    return values.length;

    }

    public int getColumnCount() { //覆盖getColumnCount(),返回列数

    return values[0].length;

    }

    public Object getValueAt(int rowIndex, int columnIndex) {//返回指定位置元素

    return values[rowIndex][columnIndex];

    }

    }

    接着就是如何来创建表格,如下:

    javax.swing.JTable jt = new javax.swing.JTable(newTableValues());

    下面的代码是包含两种数据模型DefaultTableModel和AbstractTableModel的例子

    import javax.swing.table.AbstractTableModel;

    import java.awt.*;

    import javax.swing.*;

    public class TableValues extends AbstractTableModel{

    public int[][] values = {{1,2,3,4,5},{2,3,4,5,6},{3,4,5,6,7},{4,5,6,7,8}};

    public int getRowCount() {

    return values.length;

    }

    public int getColumnCount() {

    return values[0].length;

    }

    public Object getValueAt(int rowIndex, int columnIndex) {

    return values[rowIndex][columnIndex];

    }

    }

    public class SimpleTableTest extends JFrame{

    public SimpleTableTest() {

    Container pane = getContentPane();

    pane.setLayout(new BorderLayout());

    TableValues tv = new TableValues();

    table =new JTable(tv);

    table1 = new JTable(new javax.swing.table.DefaultTableModel(4, 5));

    pane.add(table,BorderLayout.CENTER);

    pane.add(table1,BorderLayout.SOUTH);

    }

    protected JTable table,table1;

    public static void main(String[] args){

    SimpleTableTest stt = new SimpleTableTest();

    stt.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    stt.setSize(400, 200);

    stt.setVisible(true);

    }

    }

    执行结果:

    展开全文
  • 表格能够直观的传达数据信息,使信息显得条理化,便于阅读同时也利于管理。那在PDF类型的文档中如何来添加...下面是两种方法来添加表格的全部代码,供参考。 两种类用于创建表格的异同:   PdfTable PdfGrid
  • 第一 ,{field: 'create_time', title: '创建时间', align:'center',width:250,align:'center'} ,{fixed: 'right',title: '操作', align:'center',templet:function (item) { ...
  • js里面表格的动态添加我用两种方法演示 第一个es6里面的模板法 第二种是用循环遍历去创建元素然后再appendchild放入document里面去 先来看看效果图 先来展示第一种方法: <!DOCTYPE html> <...
  • 最近在学习sqlalchemy,有个动态修改__tablename__需求,搜索了好几天,没有太完美答案,要么看不懂,要么比较古老了,通过研究,整理以下几sqlalchemy动态修改__tablename__的方法:一、函数封装table model...
  • javascript创建表格

    千次阅读 2019-06-16 23:25:49
    元素来使用,以下是使用JavaScript生成表格的两种方式。 方法一 自行创建<tr>元素和<td>元素,并使用DOM的appendChild方法将<td>元素添加进<tr>元素,将<tr>元素添加<table&...
  • 创建表格视图

    2016-06-24 14:27:23
    介绍: 本代码提供两种方式,让开发者更方便地创建一个表格视图,第一种方式是通过代理的方法实现整个视图搭建,仿造UITableView模式进行编写,其功能强大;第二种方式是对第一种方式一种封装,让开发者能更快速...
  • markdown 创建表格

    2020-01-13 10:05:13
    这里介绍两种方法写markdown的表格 一、 极简方式 name | 价格 | 数量 -|-|- 香蕉 | $1 | 5 | 苹果 | $1 | 6 | 草莓 | $1 | 7 | 效果如下: name 价格 数量 香蕉 $1 5 苹果 $1 6 ...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新改变功能快捷键合理的创建标题,有助于目录生成如何改变文本样式插入链接与图片如何插入一段漂亮代码片生成一个适合你列表创建一个表格设定内容居中、居左、...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新改变功能快捷键合理的创建标题,有助于目录生成如何改变文本样式插入链接与图片如何插入一段漂亮代码片生成一个适合你列表创建一个表格设定内容居中、居左、...
  • Markdown之创建表格语法

    千次阅读 2019-03-20 16:40:40
    这里介绍两种方法写markdown的表格 1. 最简单方式 name | 价格 | 数量 -|-|- 香蕉 | $1 | 5 | 苹果 | $1 | 6 | 草莓 | $1 | 7 | name 价格 数量 香蕉 $1 5 苹果 $1 6 草莓 $1 7 2. 通常方法 ...
  • JS导出EXCEL的两种方法

    2012-08-23 22:54:15
    JS导出EXCEL的两种方法 function method1(tableid) {//整个表格拷贝到EXCEL中 var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel ...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新改变功能快捷键合理的创建标题,有助于目录生成如何改变文本样式插入链接与图片如何插入一段漂亮代码片生成一个适合你列表创建一个表格设定内容居中、居左、...
  • 生成指定分布随机数两种方法改变功能快捷键合理的创建标题,有助于目录生成如何改变文本样式插入链接与图片如何插入一段漂亮代码片生成一个适合你列表创建一个表格设定内容居中、居左、居右...
  • AD舵机控制两种方法

    2020-10-23 15:23:12
    AD舵机控制两种方法欢迎使用Markdown编辑器新改变功能快捷键合理的创建标题,有助于目录生成如何改变文本样式插入链接与图片如何插入一段漂亮代码片生成一个适合你列表创建一个表格设定内容居中、居左、居...
  • 在静态页面中,如果要显示表格,可以通过标签以及等相互配合实现。 但是如果需要动态生成话,则可以...通过查阅相关文档,可以知道在javascriptdocument对象中有方法: (1)oElement = document.createEl
  • EasyUI 之 DataGrid的两种赋值方法

    万次阅读 2015-01-26 11:32:41
    上一篇博客《EasyUI 之 DataGrid分页组件中文显示的两种方法》中我们使用EasyUI-DataGrid在前台添加了一个表格,并且让表格的分页控件显示为中文。现在我们有了DataGrid,我们怎么让它显示我们想要的数据呢?今天就...
  • 使用mysql时,通常表中会有一个自增id字段,但当我们想将表中数据清空重新添加数据时,希望id重新从1开始计数,用以下两种方法均可:通常设置自增字段方法:创建表格时添加:create table table1(id int ...
  • 使用mysql时,通常表中会有一个自增id字段,但当我们想将表中数据清空重新添加数据时,希望id重新从1开始计数,用以下两种方法均可: 通常设置自增字段方法:创建表格时添加: create table table1(id int...
  • 在网页中我们经常会遇见这样情况,在一份表单下面会有创建按钮,当用户点击后,会自动在表格或者文本框下面再生成一份原样空表格方法一:我们先创建文本框,再利于insertAdjacentHTML属性,把文本框加在后面...
  • 如何在Python中创建Excel表格

    万次阅读 2018-07-31 21:24:56
    之前在学习os模块中,我们知道了如何创建一个txt格式文件(具体操作见https://mp.csdn.net/postedit/80903024) ...创建Excel表格一般有两种方法: 一:通过导入xlwt库来创建,这种是最常规方法,...
  • 创建一个Excel表格两种方法:手动,代码创建。而我们讲是如何代码创建:  创建Excel文件模块: workbook  读写Excel文件模块:load_workbook  注:python只支持.xlsx格式Excel文件操作 代码: from ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 424
精华内容 169
关键字:

创建表格的两种方法