您的位置：首页 > Web前端 > JavaScript

javascript中创建table

2013-12-04 17:48 393 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航