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()等技术

javascript创建table并实现翻页效果

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

【javascript】table对象操作,动态创建,删除指定行列

function createTab(){ //动态创建表格 var tabNode = document.createElement("table"); tabNode.setAttribu...

javascript 实现table展开折叠

本文是通过JavaScript实现table下的内容展开、折叠。

javascript 动态生成table

  • 2012年09月05日 00:10
  • 2KB
  • 下载

原生javascript实现拖拽改变table表格行高(html)

最近在做一个OA的项目,里面需要大量的表格操作。有一些是使用html中的table去模拟excel的功能,等项目做完,我会把这些好玩的功能抽取出来,做一个html的excel插件。   今天先和大家...

javascript 实现table展开折叠

  • 2015年10月24日 21:44
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript中创建table
举报原因:
原因补充:

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