js中添加table

<html>
<head>
    <title></title>
<script type="text/javascript">
    function getInnerHTML() {
        // alert(document.getElementById("tr1").innerHTML);
        var input = document.createElement("input");
        input.type = "text";
        input.id = "txte1";
        document.body.insertBefore(input, t1);
        init();
    }
    function init() {
        var table = document.createElement("table");
        var tbody = document.createElement("tbody");
        for (var i = 1; i < 10; i++) {
            var row = document.createElement("tr");
            row.id = i;
            if (i!=4 && i%2) {
                row.bgColor = "#ffff00";
            } else if (i == 4) {
                row.bgColor = "#ff0000";
            } else {
                row.bgColor = "#0000ff";
            }
            for (var j = 1; j < 6; j++) {
                var cell = document.createElement("td");
                cell.id = i + "/" + j;
                cell.appendChild(document.createTextNode("第" + cell.id + "列"));
                row.appendChild(cell);
            }
            tbody.appendChild(row);
        }
        table.appendChild(tbody);
        document.body.insertBefore(table,t1);
    }
</script>
</head>
<body>

<table id="t1" border="1">
<tr id="tr1">
<th>Firstname<span style=" display:none;">sd</span></th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button"
value="Alert innerHTML of table row" />

</body>
</html>

时间: 2024-10-26 18:06:27

js中添加table的相关文章

js中为table添加的一些方法

为了方便构建表格,HTML DOM为 <table>,<tbody>,<tr>元素添加了一些属性和方法. //为 <table> 元素添加的属性和方法如下. caption : 保存对 <caption> 元素(如果有)的指针. tBodies : 是一个 <tbody> 元素的HTMLCollection. tFoot : 保存着对 <tfoot> 元素(如果有)的指针. tHead : 保存着对 <thead&g

LostRoutes项目日志——在main.js中添加多分辨率适配

初始的Cocos2d-JS项目中的main.js代码的内容为: /** * A brief explanation for "project.json": * Here is the content of project.json file, this is the global configuration for your game, you can modify it to customize some behavior. * The detail of each field is

js动态添加table 数据tr td

成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table      概要代码如下: Jsp页面[javascript]//动态获取主题数据 function getzts(){     parentId = document.getElementById("bselect1").value;     if(parentId!=""){     

js中的 Table 对象

Table 对象Table 对象代表一个 HTML 表格.在 HTML 文档中 <table> 标签每出现一次,一个 Table 对象就会被创建. Table 对象集合cells[]     返回包含表格中所有单元格的一个数组.rows[]     返回包含表格中所有行的一个数组.tBodies[]     返回包含表格中所有 tbody 的一个数组. Table 对象属性align     表在文档中的水平对齐方式.(已废弃)bgColor     表的背景颜色.(已废弃)border   

日期控件的点击事件,在js中添加callback属性,不在html中直接添加

总结如下: 1. callback的data是点击事件(事件控件)完成后的回调的日期 2. return true后才能改变值,return false不能改变值 3. \ 是转义,因为在""中不能直接下一行 4. ""里面必须都是'' 5. ''里面必须都是"" 6. 最后还要加上重新注册,是parent()下的重新注册 example: //点击开始日期触发请假天数改变 $('#leave_startTime').attr("cal

js中创建table表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function createTable(){ var table = document.createElement("table&quo

在js中添加HTML类样式

有时候需要给元素添加类样式,但又要保留之前的类,可以使用element.classList.add("类名"); 原文地址:https://www.cnblogs.com/helloworldlx/p/8973399.html

有效解决js中添加border后动画bug问题

做了个demo发现如果一个div不加border属性,用对象的offsetWidth属性来控制width没问题,但是如果一旦加了border属性,问题就来了. 其实offsetWidth属性获取的的是div内容宽度加内外边距和边框的宽度总和,所以为了更好地解决这个bug,自己弄了一个getStyle方法来有效的解决这个bug.以下是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset

js中方法单词以及意思

浏览器对象是什么,它是JS编程中的顶级作用域,JS中的一切方法和属性,都是这个对象的后代 (window). 文档或文档对象,通俗的讲就是:凡是我们能看的见编码,就属于文档(document). 通过id来获取一个HTML元素,以便我们用JS来控制操作(document.getElemetnById). 在整个网页内通过标签名获得一组HTML元素的集合对象(document.getElementsByTagName). JS中创建元素的方法 (createElement). JS中添加子元素的方