dom添加表格

最新推荐文章于 2022-12-09 19:01:31 发布
最新推荐文章于 2022-12-09 19:01:31 发布
阅读量1.6k 收藏 1
点赞数
文章标签： input table button function border xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/php398893944/article/details/7303983
版权
 

dom访问方法

 

  1、document.getElementById();获取单个对象

  2、document.getElementsByName();根据网页元素的name获取对

象获取的是节点列表(对象数组)

  3、document.getElementsByTagName();根据网页标签的名称获取

对象节点列表(对象数组)

 

  除了上述基本的访问方式，还有一些辅助

  node.firstChild 获取node第一个子节点对象

  node.lastChild  获取node的最后一个子节点

  node.parentNode 获取node的父节点对象

  node.childNodes 获取node的所有的子节点，返回节点列表(对象

数组)

  node.hasChildNodes() 判断是否有子节点，如果有的话返回true

否则返回false

  node.tagName 获取node的元素名称

               如果不是元素的话，不能使用tagName

 

  previousSibling上一个节点

  nestSibling下一个节点

 

  nodeName节点名称

nodeValue

 

 

实例：使用dom实现9*9的乘法表

 

思路：

1、创建一个表格table(9*9)

 

2、创建表格所需要的行数tr

     使用循环的方式创建

3、创建表格所需的列td  

     使用循环的方式创建

4、创建文本内容text

     使用循环的方式创建

5、依次追加 文本 >>td>>tr>>table>>div

 

<style type="text/css">

  div{

    background:#F99;

    width:500px;

    height:300px;

     }

    

  table{

    

    border:#03C 1px dashed;

    

     }   

</style>

<script type="text/javascript">

/*

   思路：

1、创建一个表格table(9*9)

 

2、创建表格所需要的行数tr

     使用循环的方式创建

3、创建表格所需的列td  

     使用循环的方式创建

4、创建文本内容text

     使用循环的方式创建

5、依次追加 文本 >>td>>tr>>table>>div

 

   */ 

  //绘制表格

  function drawTable(){

    //创建一个表格

     var table=document.createElement("table");

     //给表格加上边框

     table.setAttribute("border",1);

     //外层循环控制行数

     for(var i=1;i<=9;i++){

           //循环创建tr

           var tr=document.createElement("tr");

          //内层循环创建列数

           for(var j=1;j<=i;j++){

                 //先创建text

                 var text=document.createTextNode(j+"*"+i+"="+i*j);

                  

                  //创建列

                  var td=document.createElement("td");

                

                  //文本追加到td

                    td.appendChild(text);

                  //td追加到tr

                    tr.appendChild(td);

                  }

            //tr追加到table   

            table.appendChild(tr);

            }

    

     //table追加到div中

     document.getElementById("d1").appendChild(table);

     }

 

 

//删除table的行

 

  function delTable(){

    

   //获得table

      var tr=document.getElementsByTagName("tr");

      //获得table

      var table=tr[0].parentNode;

      根据table删除tr 移除最后一行

      table.removeChild(tr[tr.length-1]);

    

    

     }

//非常重要

function getClass(){

   document.getElementById("d1").className="bbb";

   alert(document.getElementById("d1").className);

   }

 

 

</script>

</head>

 

<body>

<div id="d1" class="aaaa"></div>

 

<input type="button" value="绘制9*9的乘法表" οnclick="drawTable()">

 

<input type="button" value="删一行" οnclick="delTable()">

 

<input type="button" value="getClass" οnclick="getClass()">

</body>

</html>

 

 

使用dom添加和删除表格

<!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-Type" content="text/html; charset=utf-8" />

<title>添加表格</title>

<style type="text/css">

#d1{

   width:500px;      

   height:300px;

   background:#F66;

   }

 

</style>

<script type="text/javascript">

//刷新时只显示表头

  var flag=true;

 //添加时只显示增加行数，不再重复添加表头

var fg=false;

//删除时传id

var idd=1;

 function addtable(){

    

    var username=document.getElementById("username").value;

    var sex=document.getElementById("sex").value;

    var phone=document.getElementById("phone").value;

    var mail=document.getElementById("mail").value;

    //var add=document.getElementById("button").value;

  

  

  

    //创建表格

    var table=document.createElement("table");

    table.setAttribute("border",1);

    table.setAttribute("width",500);

    table.setAttribute("height",40);

    

    

     //th

     var arr=new Array("姓名","性别","电话","邮箱","操作");

   

    //添加删除按钮

      var input=document.createElement("input");

      input.setAttribute("type","button");

      input.setAttribute("value","删除");

     

  

    //tr

    var str=new Array(username,sex,phone,mail,"");

    

    

  

   //创建表头

   if(flag){

    for(var i=1;i<=1;i++){

           var tr=document.createElement("tr");

      for(var j=1;j<=5;j++){

            

             //th内容 

         var text1=document.createTextNode(arr[j-1]);                

            var th=document.createElement("th");                   

            th.appendChild(text1);

             tr.appendChild(th);

           

             }      

           table.appendChild(tr);

           }

    

   }

  

   //创建表的内容

  

   if(fg){

  

    

      

   //行数

    for(var i=1;i<=1;i++){

           var tr=document.createElement("tr");

           tr.setAttribute("align","center");

      for(var j=1;j<=5;j++){

            

           

  

            //tr内容

            var text=document.createTextNode(str[j-1]);          

         

            var td=document.createElement("td");

           

         

            if(j==5){

  

     //把按钮添加到td中

       td.appendChild(input);

       input.setAttribute("id","aa"+idd);

          //alert(idd);

        input.setAttribute("onclick","deltable(this.id)");

                

                   }

            td.appendChild(text);

           

             tr.appendChild(td);

             }      

           table.appendChild(tr);

           }

         

            idd+=1;

   }

     document.getElementById("d1").appendChild(table);

     flag=false;

     fg=true;

  

    }

    

//删除行    

  function deltable(did){

 

    // var input=document.getElementsByTagName("input");

    // var table=input[0].parentNode.parentNode.parentNode;

     //alert(table.tagName);

     //alert(input[did-1]);

     //table.removeChild(tr[tr.length-1]);

    

     var input=document.getElementById(did);

    

     var table=input.parentNode.parentNode.parentNode;

     //alert(table.nodeName);

    // alert(did);

    //alert(table.firstChild.tagName);

    table.removeChild(input.parentNode.parentNode);

    

    //alert(document.getElementsByTagName("tr").length);

    

    

     } 

 

 

</script>

</head>

 

<body οnlοad="addtable()">

 

<div id="d1"></div>

 

<form method="post" name="myform">

姓名：<input type="text" id="username" name="username"/>

性别：<input type="text" id="sex" name="sex"/><br><br>

电话：<input type="text" id="phone" name="phone"/>

邮箱：<input type="text" id="mail" name="mail"/><br><br>

   &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;   &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;   &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  

   <input type="button" id="button" name="button" value="添加" οnclick="addtable()"/>

    

      <input type="hidden" id="hidden" name="hidden" value="hidden"/>

    

     

</form>

</body>

</html>

 

 

php398893944
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html弹窗显示表格,js弹框表格，获取数据添加进去dom里面
weixin_32163411的博客
06-17 1662
js操作DOM是否是你想要的结构？我的问题与你类似，只不过是建立在动态表上/**功能实现：1、实现表格添加一行2、实现表格删除当前行步骤：1、根据表格id获取当前表格2、获取表格中的tBody(Bodies[0])3、为添加按钮增加click事件，为tBody创建子节点添加4、为当前行的a元素增加click事件，删除本行注意点：1、添加一行时，生成序号的获取2、删除时，获取a元素，添加事件*/wi...
DOM基础教程之使用DOM控制表格
09-03
比如在用户交互事件中，可以动态添加新成员的信息，使得表格实时更新。 除了插入操作，DOM还支持修改表格的内容。例如，如果我们想要修改已有表格的一行或一列，可以首先通过`getElementById`、`...
DOM之增删改、表单操作 JavaScript边学边记（八）
若非个黄瓜的博客
11-27 245
DOM重点理解、表单重在运用操作DOM（更新、遍历、添加、删除）获取一个DOM节点更新DOM插入DOM循环DOM的所有子节点删除DOM表单 form提交表单 操作DOM（更新、遍历、添加、删除） HTML会被解析为DOM树 按照父节点 -&gt; 子节点的层级查找DOM节点 eg document.getElementById('div1').getElementByClassName("t1")...
【javascript】Dom操作 表格的添加行，删除行，修改行，
口袋里的小龙的专栏
07-25 4184
Dom操作 表格的添加行，删除行，修改行
DOM实现表格添加
LSQ_2584951836的博客
08-24 734
DOM–表格添加 实现增删功能： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
使用DOM节点的动态添加和删除向表格中插入删除数据
yinghanhanhan的博客
12-09 927
在插入数据按钮的事件处理函数中，使用document对象的getElementById、getElementsByTagName等属性获取输入框的值。在删除超链接的事件处理函数中，获取超链接的父节点td，继续获取父节点tr，在获取父节点table，然后将table节点中的tr节点删除。在页面中添加文本输入框和选项菜单，并提示用户输入，添加插入数据按钮，并添加点击事件。绘制表格，添加四条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件。点击插入数据按钮，将输入框中的数据插入到表格中。
07-DOM操作表格
03-06
8. **表格排序**：通过JavaScript实现表格数据的排序，这通常涉及到对数据数组进行排序，然后更新DOM。例如，可以使用`sort()`函数对数组排序，再更新`<tr>`元素的位置。 9. **表格数据绑定**：当表格数据来源于...
JavaScript 学习笔记（十三）Dom创建表格
12-10
本文将详细讲解如何利用JavaScript的DOM API创建表格，包括插入行、插入单元格、删除行以及设置元素属性。 1. **插入行（insertRow）** `insertRow(index)` 方法用于向表格中插入新行。`index` 参数表示新行将被...
JavaScript DOM 学习第三章 内容表格
10-29
在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表，然后给他们添加一个链接。
用原生Dom实现向表格中添加数据
weixin_30478619的博客
09-09 321
用原生Dom实现向表格中添加数据 <script> document.getElementById("submit").onclick=function(){ //获取输入节点 var name=document.getElementById("iname"); var email=document.getElem...
JS DOM 表格操作
04-20
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
dom操作表格示例(dom创建表格)
xyjikl
12-10 869
一、使用HTML标签创建表格： 复制代码 代码如下: 人员表 姓名 性别 年龄 张三 男 20 李四 女 22 合计：N thead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个 二、使用DOM创建表格 标签是HT
js表格中的DOM操作之添加、删除行
慵懒的猫
10-14 7601
功能实现：1、实现表格添加一行 2、实现表格删除当前行 步骤：1、根据表格id获取当前表格 2、获取表格中的tBody(Bodies[0]) 3、为添加按钮增加click事件，为tBody创建子节点添加 4、为当前行的a元素增加click事件，删除本行 注意点：1、添加一行时，生成序号的获取 2、删除时，获取a元素，添加事件
DOM创建表格
普罗旺斯_浅笑的博客
03-12 481
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; var table =
DOM / DOM操作表格
weixin_34234823的博客
04-15 264
DOM 　【获取层次节点的常用属性】 1 .childNodes:（数组）获取UL里面的所有子节点（包含元素节点/文本节点）； 2 .firstChild：获取元素的第一个子节点； 3 .lastChild： 获取元素的最后一个子节点； 4 .ownerDocument：获取当前文档根节点。在HTML文档中，为document节点； 5 .parentNode： ...
JavaScript DOM操作之表格操作(3)
u014661569的专栏
05-22 643
/** *DOM操作表格--(搜索) *toLowerCase()转为小写 *search返回匹配元素的位置,没有的返回-1 *split()将字符串拆分为数组 */ HTML 文件代码       domTableOperate.html                     NAME:      
JavaScript DOM操作表格及样式
weixin_33949359的博客
07-20 370
一．操作表格 <table>标签是HTML中结构最为复杂的一个，可以通过DOM来创建生成它（比较麻烦），或者HTMLDOM来操作它。 //需要操作的table <tableborder="1"width="300"> <caption>人员表</caption> <thead> <...
DOM表格操作 添加删除
baobao__的博客
09-08 1107
DOM表格操作1.获取表格元素 1.获取表格元素
使用core dom方式动态添加表格
最新发布
03-16
使用Core DOM方式动态添加表格可以通过以下步骤实现： 1. 创建一个table元素，并设置其属性和样式。 2. 创建一个thead元素，并添加表头行和单元格。 3. 创建一个tbody元素，并添加表格数据行和单元格。 4. 将thead和tbody元素添加到table元素中。 5. 将table元素添加到文档中的指定位置。 例如，以下代码可以动态创建一个包含表头和两行数据的表格，并将其添加到文档中： ``` // 创建table元素 var table = document.createElement("table"); table.setAttribute("border", "1"); table.style.width = "100%"; // 创建thead元素 var thead = document.createElement("thead"); var headerRow = document.createElement("tr"); var headerCell1 = document.createElement("th"); headerCell1.appendChild(document.createTextNode("Name")); var headerCell2 = document.createElement("th"); headerCell2.appendChild(document.createTextNode("Age")); headerRow.appendChild(headerCell1); headerRow.appendChild(headerCell2); thead.appendChild(headerRow); // 创建tbody元素 var tbody = document.createElement("tbody"); var dataRow1 = document.createElement("tr"); var dataCell1 = document.createElement("td"); dataCell1.appendChild(document.createTextNode("John")); var dataCell2 = document.createElement("td"); dataCell2.appendChild(document.createTextNode("30")); dataRow1.appendChild(dataCell1); dataRow1.appendChild(dataCell2); var dataRow2 = document.createElement("tr"); var dataCell3 = document.createElement("td"); dataCell3.appendChild(document.createTextNode("Jane")); var dataCell4 = document.createElement("td"); dataCell4.appendChild(document.createTextNode("25")); dataRow2.appendChild(dataCell3); dataRow2.appendChild(dataCell4); tbody.appendChild(dataRow1); tbody.appendChild(dataRow2); // 将thead和tbody添加到table中 table.appendChild(thead); table.appendChild(tbody); // 将table添加到文档中的指定位置 var container = document.getElementById("container"); container.appendChild(table); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值