10JavaScript DOM动态创建表格第二种方法(建议使用的方法)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        var dic = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com.cn/", "谷歌": "http://www.google.com" };

        onload = function () {
            document.getElementById(‘btn‘).onclick = function () {
                //创建一个表格
                var tb = document.createElement(‘table‘);
                tb.border = ‘1‘;
                for (var item in dic) {
                    //根据表格tb来创建行
                    var rowObj = tb.insertRow(-1);
                    //根据行来创建单元格
                    var celObj1 = rowObj.insertCell(-1);
                    if (typeof (celObj1.innerText) == ‘string‘) {//判断浏览器兼容问题
                        //IE浏览器
                        celObj1.innerText = item;
                    } else {
                        //火狐浏览器
                        celObj1.textContent = item;
                    };
                    var celObj2 = rowObj.insertCell(-1);
                    celObj2.innerHTML = ‘<a href="‘+dic[item]+‘">‘+dic[item]+‘</a>‘;
                };
                document.body.appendChild(tb);
            };
        };
    </script>
</head>
<body>
    <input id="btn" type="button" name="name" value="添加表格" />
</body>
</html>

  

时间: 2024-10-05 15:26:58

10JavaScript DOM动态创建表格第二种方法(建议使用的方法)的相关文章

OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法

<span style="font-size:24px;">//////第一种方法 // NSMutableArray *arr = [NSMutableArray array]; // for (int i = 0; i < 13; i ++) { // [arr addObject:[NSString stringWithFormat:@"lanou%d",i + 1]]; // } // NSLog(@"%@",arr);

javascript动态创建表格:新增、删除行和列

转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加

JSTL根据后台传输list大小动态创建表格

最近,项目中需要写一个根据后台传入List类型对象的大小来动态创建表格,并在JSP页面中将信息显示出来,并且对于一些特殊信息颜色飘红表示. 首先看一下List对象存储的内容,这个项目需要检测系统中一些服务器的连接情况,每个应用可能关联多个服务器,服务器的数量不同,所以使用List来存储信息,List中的对象是一个长度为2的String数组.这个String数组的第一个位置存放需要检测服务器的ip:port,第二个位置存放是检测结果,结果又两种,连接成功!和连接失败! 例如下面一个String数组

第84天:jQuery动态创建表格

jQuery动态创建表格 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态创建表格</title> 6 <script src="jquery-1.11.1.js"></script> 7 <style> 8 table {

Javascript:DOM动态创建元素实例应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom:动态创建元素</title> </head> <body> <ul id="demo1"> </ul> <input type="text" id=&quo

FineUIMvc随笔 - 动态创建表格列

声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC 中,如果还想着 WebForms 的那一套,想着怎么才能在 Controller 中访问 View 中的表格控件,这是行不通的. 我曾写过一个系列文章<ASP.NET MVC快速入门(MVC5+EF6)>,开篇就讲到了 MVC 中的页面的生成流程: 这个页面之所以能够呈现在我们眼前,经历了三个主

js动态创建表格------Day59

刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完成了今天的记录,结果临关机,登录了下,发现又好了,就再多花个几分钟转下吧,也不管究竟在意的是什么了,权当强迫症了... 前几天记录了动态的添加一行一列:insertRow()和insertCell();动态的删除一行一列:deleteRow()和deleteCell():选中一行:this的参数传递,这些都是实现的关键,但是这一切都建立在一个基础上:那就是存在一个表格.今天就来记录下动态建立表格的方法: 事实上在刚开始的时候,我只想到了一个

html中动态创建表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>dtTable.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equ

IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法(转)

IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法(转) IE下使用excanvas.js之后,动态创建的canvas不支持getContext的解决方法 引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法创建的就不行了 var canvas=document.createElement(”canvas”); if(canvas.getContext){ alert(”support