HTML table利用 JS动态增加行列 并且设置colspan

如题  在给一个借书系统做子表时需要进行这个动态添加行的操作:

主要思想:

1.获取table对象

2.增加行以及相应的列

3.设置列的colspan以及innerHTML就是内容。

     function AddTableRow()
            {
                var Table = document.getElementById("booktable");   //取得自定义的表对象
                NewRow = Table.insertRow();                        //添加行
                NewCell1= NewRow.insertCell();                     //添加列
                NewCell2=NewRow.insertCell();
                NewCell3=NewRow.insertCell();
                NewCell1.innerHTML = "<input/>";          //添加数据
                NewCell2.innerHTML="<input/>";
                NewCell2.colSpan=2;
                NewCell3.innerHTML="<input/>";
                NewCell3.colSpan=2;
            } 

注意colSpan的大小写。效果如下

时间: 2024-08-09 06:21:21

HTML table利用 JS动态增加行列 并且设置colspan的相关文章

JS动态增加删除UL节点LI

JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li>

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

Java抓取利用JS动态加载的网页

最近实验室项目涉及到很多爬虫相关的东西,在此做个整理,爬虫最难的问题应该是javascript和ajax的处理.现在很多网站使用大量ajax,普通爬虫无法获取js生成的内容. 对于普通的静态网页,HttpClient是Java中抓取网页的利器,然而针对像京东商品页面这样的页面却无能为力,例如:http://item.jd.com/10875285.html 主要原因是页面中的一部分信息比如商品评论是通过JavaScript异步加载的,如果直接通过HttpClient直接抓取只会得到其中的js代码

js动态增加表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Titanium系列--利用js动态获取当前时间

动态获取时间: //显示时间 function getDateTime() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth()+1; var day = now.getDate(); //var hour = now.getHours(); //var minute = now.getMinutes(); //var second = now.getSeconds(); if(month

JS动态添加行列

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Add-Delete Row.aspx.cs" Inherits="Add_Delete_Row" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

JS动态增加删除UL节点LI及相关内容示例

<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> <li id=3>333333

利用js动态创建&lt;style&gt;

var nod = document.createElement("style"), str = "body{background:#000;color:#fff} a{color:#fff;text-decoration:none;} a:hover{color:red;text-decoration:underline}"; nod.type="text/css"; if(nod.styleSheet){ //ie下 nod.styleShe

2017-05-17 js动态生成轮播图小圆点

从今天开始,把自己做的笔记转移到博客园: 今晚复习了一下动态创建轮播图小圆点做了一下小的笔记: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2017-05-17 js动态生成轮播图小圆点</title> 6 <!-- author:ishou Mr丶Zhu --> 7