利用JavaScript给Table添加行

javascript

可能自己走是没有错误的,为了自己能够更快的提高,在这里已经没有太多技术提升的空间了。大家都是在不停的Coding,从来都不会去想Case的可行性,累了。最近的心理压力也很大,总是胡思乱想,还好有个徒弟经常来问我问题,基本都是JavaScript的,以前自己不会,现在顺路补习一下。呵呵

具体代码如下:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>增加Table行</title>
    </head>
    <script>
        function addRow(obj)
        {
        //添加一行
        var newTr = testTbl.insertRow();
        //添加两列
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        //设置列内容和属性
        newTd0.innerHTML = '<input type=checkbox id="box4">';
        newTd1.innerText= '新加行';
        }
    </script>
    <body>
        <table id="testTbl" border=1>
            <tr id="tr1">
                <td ><input type=checkbox id="box1"></td>
                <td id="b">第一行</td>
            </tr>
            <tr id="tr2">
                <td ><input type=checkbox id="box2"></td>
                <td id="b">第二行</td>
            </tr>
            <tr id="tr3">
                <td ><input type=checkbox id="box3"></td>
                <td>第三行</td>
            </tr>
        </table>       
        <br />
        <input type="button" id="add" value="Add Row" />
    </body>
</html> 

PS:

用rowIndex

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>

<script>
function getrow(obj)
{
   if(event.srcElement.tagName=="TD"){
   curRow=event.srcElement.parentElement;
   alert("这是第"+(curRow.rowIndex+1)+"行");

   }
}
</script>

<table border="1" width="100%" onclick=getrow(this)>
  <tr>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
  </tr>
  <tr>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
  </tr>
</table>

</body>

</html>

另外,若要删除一个表格的行怎么做
1。删除所有行,但仍保留<table></table>;
2。删除某一行;
3。删除连续的一些行,如第1至第3行;
4。删除不连续的一些散行;

document.all.myTable.deleteRow(xx)

xx表示某行,下标从0开始计算

时间: 2024-08-01 20:53:49

利用JavaScript给Table添加行的相关文章

利用javaScript实现点击输入框弹出窗体选择信息

 这篇文章主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在这里奉上源代码,没有做样式处理,不过功能是可以的,希望大家可以和我交流交流!   代码如下: <html>  <head>   <title>点击弹出DIV选择信息</title>      <meta http-equiv="keywords" content="keyword1

利用JavaScript和CSS制作浮动menu

css|javascript|浮动 随着INTERNET的高速发展,越来越多的人拥有了个人主页,但以往的静态HTML语言,已经不能满足人们的要求.javascript和多层模式表单(Cascading Style Sheet, CSS)的出现使网页更加生动活泼,从而可以获得令人满意的效果.本文以javascript和CSS制作一种浮动菜单的方法为例,来说明其灵活性,同时也是抛砖引玉希望和广大网友共同切磋技术,制作出更好的家页(homepage).当我们浏览一个超过屏幕显示范围的一个页面时,为了回

js-如何用JavaScript操作table中tr中td的值?

问题描述 如何用JavaScript操作table中tr中td的值? 如何用JavaScript操作table中tr中td的值? 如何用JavaScript操作table中tr中td的值? 如何用JavaScript操作table中tr中td的值? 解决方案 <html> <head> <title> 修改td中的值 </title> </head> <body> <table id="myTable" wi

利用javascript移动div层-javascript 拖动层_javascript技巧

利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码-html code: 复制代码 代码如下: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; position: absolut

js实现table添加行tr、删除行tr、清空行tr的简单实例_javascript技巧

如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"

利用JavaScript创建功能强大的GUI

javascript|创建 大多数的计算机用户都非常熟悉Windows的图形用户界面(GUI),都通过使用Word或微软的电子邮件客户端软件了解了按钮.工具条.标签,但与客户端软件都拥有几乎一致的界面截然不同的是,我们可以发现,每个网站的界面都各不相同.用户需要学会如何使用每一种互联网应用程序.尽管大多数的互联网应用程序都不是太复杂,但一个用户需要不断地去学习应用程序界面,时时感觉自己象个新手,这对于用户而言,毕竟不是一件令人愉快的事. 通过利用javascript和CSS建立互联网应用程序或网

Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向

javascript|教程|浏览器 利用javascript基于浏览器类型的重定向 基于浏览器类型的重定向的实现可以通过使用javascript函数来检查navigator.userAgent的字符串"MSIE",它将告诉你用户是否使用Microsoft Internet Explorer(微软的IE浏览器).通过修改windows.location函数可以重定向到正确的URL(同意资源定位器).下面是详细的代码: <HTML> <HEAD> <SCRIP

Javascript实例教程(7) 利用Javascript进行密码保护

javascript|教程 利用javascript进行密码保护 随着互联网的飞速发展,地球变得越来越小,人们可以跨越时间和空间得界限进行交流于合作.但是随之也产生了一些肆意搞破坏的黑客,这就使得程序设计人员在编制应用程序中要考虑到黑客袭击这个问题,所以自然而然地就会想到保护.本节教程将教你怎样利用javascript进行密码保护.利用javascript来对网页进行密码保护有几种方法.最早的一种方法是依耐于用户而不知道目标文件名,代码如下: <SCRIPT LANGUAGE="javas

利用javascript来转换GB2312到UNICONDE -- &amp;#形式

javascript|转换 利用javascript来转换 <style>BODY {FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;}input {FONT-SIZE: 9pt; height: 13pt;}</style> <script language="JavaScript1.2">/*This foll