javascript中创建table

原创 2013年12月04日 17:48:07

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jstable.aspx.cs" Inherits="DOM.jstable" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function createtable1()
        {
            var tablenode = document.createElement('table');

            //设置表格属性
            tablenode.setAttribute('border', '1px');
            tablenode.setAttribute('width', '500px');
            tablenode.setAttribute('height', '100px');

            //创建第一行
            tablenode.insertRow(0);
            tablenode.rows[0].insertCell(0);
            tablenode.rows[0].insertCell(1);
            tablenode.rows[0].insertCell(2);
            tablenode.rows[0].cells[0].appendChild(document.createTextNode('姓名'));
            tablenode.rows[0].cells[1].appendChild(document.createTextNode('旅游地点'));
            tablenode.rows[0].cells[2].appendChild(document.createTextNode('出发日期'));

            //创建第二行
            tablenode.insertRow(1);
            tablenode.rows[1].insertCell(0);
            tablenode.rows[1].insertCell(1);
            tablenode.rows[1].insertCell(2);
            tablenode.rows[1].cells[0].appendChild(document.createTextNode('刘能'));
            tablenode.rows[1].cells[1].appendChild(document.createTextNode('象牙山'));
            tablenode.rows[1].cells[2].appendChild(document.createTextNode('2013-11-11'));

            //创建第三行
            tablenode.insertRow(2);
            tablenode.rows[2].insertCell(0);
            tablenode.rows[2].insertCell(1);
            tablenode.rows[2].insertCell(2);
            tablenode.rows[2].cells[0].appendChild(document.createTextNode('谢娜'));
            tablenode.rows[2].cells[1].appendChild(document.createTextNode(' 马栏山'));
            tablenode.rows[2].cells[2].appendChild(document.createTextNode('2013-10-10'));

            var divnode = document.getElementById('mydiv');
            divnode.appendChild(tablenode);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="mydiv">
        <input id="Button1" type="button" value="button"  onclick="createtable1()"/>
    </div>
    </form>
</body>

</html>

JavaScript动态创建table表格

自动创建表格,主要是利用table对象的insertRow(),和insertCell()等技术
  • yangxin_blog
  • yangxin_blog
  • 2015年10月13日 23:20
  • 9597

JavaScript动态向表格添加数据

利用javascript ,动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 编号 姓名 职位 ...
  • ChauncyWu
  • ChauncyWu
  • 2017年01月23日 20:49
  • 3043

使用js创建一个动态表格

这是一个使用js创建的一个动态表格,内容含有添加插入一个表格,删除表格的一行和全部。界面如图suos 代码如下: 动态表格 //增加表格头的样式 #list th{ bac...
  • guyan1111
  • guyan1111
  • 2016年12月15日 20:15
  • 2419

JavaScript -- 控制table的创建 与 删除, 排序, 表格颜色

无标题文档 function createTab(src) { var row = document.getElementsByName("rows")[0].value; var col ...
  • xj626852095
  • xj626852095
  • 2013年11月29日 23:17
  • 776

JavaScript动态创建table表格

自动创建表格,主要是利用table对象的insertRow(),和insertCell()等技术
  • yangxin_blog
  • yangxin_blog
  • 2015年10月13日 23:20
  • 9597

javascript创建table并实现翻页效果

由于项目的需要,需求做出来一个动态的table并且能够实现翻页,于是自己就花时间搞出来一个,分享给又需要的朋友。 先看看效果: 主要代码: //界面内部...
  • zf97576419
  • zf97576419
  • 2015年02月05日 20:40
  • 310

用Javascript进行简单的Table点击排序

  • 2009年03月31日 10:46
  • 3KB
  • 下载

js 实现 JavaScript遍历table的行和列

  • 2010年03月31日 11:24
  • 808B
  • 下载

JavaScript for breakfast Crunching scripts for your coffee table (含源代码)

  • 2008年08月18日 17:46
  • 2.63MB
  • 下载

JavaScript html js Table排序

  • 2009年09月24日 11:25
  • 13KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript中创建table
举报原因:
原因补充:

(最多只允许输入30个字)