//window.onload = modTwo;
 
    1、点击单元格内容  弹窗promrt接收值   将接受的值提换单元格内容
    2、点击单元格  出现2个按钮 加粗 字体颜色标红
        1、给点击的元素加属性  为了区分加粗的对象
        2、给按钮加点击事件
        3、找到元素，修改样式
    3、创建一行
   
    1、获取所有的td标签
    2、循环td   给每一个替代加上onclick属性
    给所有元素加onclick事件
    function modTwo(){

var tdArr = document.getElementsByTagName("td");

for(var i = 0; i<tdArr.length;i++){
    tdArr[i].setAttribute("onclick","modone(this)");
            tdArr[i].style.cursor = "pointer";
        }
    }
    
    
    
  
    1、给单元格添加点击事件
    2、方法内逻辑，弹窗接收用户的输入。=>保存在一个变量里面
    3、找到要修改内容的单元格，通过操作内容把用户输入的值提换进去
   
    var td_obj;
    //td的点击事件
    function modone(obj){
        td_obj = obj;
        //修改值
        obj.innerHTML = prompt("输入要修改的值");
        //按钮显示
        var div = document.getElementById("dd");
        div.style.display = "block";

//给本标签添加自定义属性
        obj.setAttribute("abc","abc");
    }
    
    
    //加粗按钮
    function jc(){
        //找到所有td
        var tdArr = document.getElementsByTagName("td");
        
        for(var i = 0; i<tdArr.length;i++){
            //找元素
            var a = tdArr[i].getAttribute("abc");
            if(a == "abc"){
                tdArr[i].style.fontWeight = "bold";
                tdArr[i].removeAttribute("abc");
            }
        }
    }
    //字体变红按钮
    function bh(){
        //td_obj是全局变量
        td_obj.style.color = "red";
        //按钮显示
        var div = document.getElementById("dd");
        div.style.display = "none";
    }

/*
    添加一行
    1、找到父元素（往这里面添加元素）
    2、创建元素 tr  td
        创建td元素  创建tr元素
        把td元素放到tr元素里面
    3、把tr放到父元素
    */
    function addcol(){
//        1、找到父元素（往这里面添加元素）
        var tableObj = document.getElementById("tab");
    
//        2、创建元素 tr  td创建td元素  创建tr元素
        var trObj = document.createElement("tr");
        
        
        for(var i = 0; i<4;i++){
            var tdObj = document.createElement("td");
            tdObj.innerHTML = prompt("请输入需要的值");
    //            把td元素放到tr元素里面
            trObj.appendChild(tdObj);
        }

//        3、把tr放到父元素
        tableObj.appendChild(trObj);
        
        var div = document.getElementById("dd");

}

</script>
</head>

<body ><!-- onLoad="modTwo()" -->
<button onClick="addcol()">添加一行</button>
<table id="tab" border="1" width="80%" cellpadding="0" cellspacing="0">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>15</td>
        <td>101</td>
    </tr>

</table>

<div id="dd" style="">
    <button onClick="jc()">加粗</button>
    <button onClick="bh()">红色字体</button>
</div>

</body>
</html>
<script>modTwo()</script>

练习题。对DOM中document的深刻理解巩固的更多相关文章

  1. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  2. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  3. Android：LinearLayout布局中Layout_weight的深刻理解

    首先看一下LinearLayout布局中Layout_weight属性的作用:它是用来分配属于空间的一个属性,你可以设置他的权重.很多人不知道剩余空间是个什么概念,下面我先来说说剩余空间. 看下面代码 ...

  4. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  5. 深刻理解Java中final的作用(一):从final的作用剖析String被设计成不可变类的深层原因

    声明:本博客为原创博客,未经同意,不得转载!小伙伴们假设是在别的地方看到的话,建议还是来csdn上看吧(原文链接为http://blog.csdn.net/bettarwang/article/det ...

  6. [转]深刻理解Python中的元类(metaclass)以及元类实现单例模式

    使用元类 深刻理解Python中的元类(metaclass)以及元类实现单例模式 在看一些框架源代码的过程中碰到很多元类的实例,看起来很吃力很晦涩:在看python cookbook中关于元类创建单例 ...

  7. 深刻理解 React (一) ——JSX和虚拟DOM

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/155 来源:腾云阁 https://www.qclou ...

  8. 深刻理解Java中的String、StringBuffer和StringBuilder的差别

    声明:本博客为原创博客,未经同意.不得转载!小伙伴们假设是在别的地方看到的话,建议还是来csdn上看吧(链接为http://blog.csdn.net/bettarwang/article/detai ...

  9. javascript判断元素存在和判断元素存在于实时的dom中的方法

    今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...

随机推荐

  1. touch python

    一  使用while循环输出 1 2 3 4 5 6 8 9 10. i=0 while i<10: i=i+1 if i == 7: continue print(i) 二  求 1-100所 ...

  2. C#Remoting

    C# Remoting   细细品味C#——.Net Remoting专题 http://www.cnblogs.com/xia520pi/archive/2011/11/02/2233371.htm ...

  3. [ Python ] Flask 基于 Web开发 大型程序的结构实例解析

    作为一个编程入门新手,Flask是我接触到的第一个Web框架.想要深入学习,就从<FlaskWeb开发:基于Python的Web应用开发实战>这本书入手,本书由于是翻译过来的中文版,理解起 ...

  4. django之部署

    布署 从uwsgi.nginx.静态文件三个方面处理 服务器介绍 服务器:私有服务器.公有服务器 私有服务器:公司自己购买.自己维护,只布署自己的应用,可供公司内部或外网访问 公有服务器:集成好运营环 ...

  5. SWFUpload初体验 For Struts1.x

    SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input ty ...

  6. C# 鼠标穿透窗体与恢复

    转自原文 C# 鼠标穿透窗体与恢复 引入user32.dll [DllImport("user32.dll")] public static extern uint SetWind ...

  7. leetcode384

    public class Solution { private int[] nums; private Random random; public Solution(int[] nums) { thi ...

  8. 「小程序JAVA实战」小程序开发注册用户的接口（33）

    转自:https://idig8.com/2018/08/30/xiaochengxujavashizhanxiaochengxukaifazhuceyonghudejiekou33/ 从用户注册接口 ...

  9. C# event 事件学习

    C# event 事件学习 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-26 章节: 简单事件编写 模拟 WPF 控件传递 ...

  10. ui-router 留存

    学习 ui-router - 路由控制 022014年01月 参考原文:https://github.com/angular-ui/ui-router/wiki/URL-Routing 在你的应用中大 ...