//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. 写一个trim函数，兼容IE firefox chrome（正则）

    因为在获取输入框内容时,常常trim下多余的空格.而IE部分低端浏览器里的JavaScript版本不内置trim()这个清楚空格函数,而流行的浏览器里都兼容了,比如chrome,FF等.为了不让IE下 ...

  2. springcloud(三) eureka集群

    上一节讲到user微服务和order微服务和eureka注册中心一起使用,那么问题来了如何注册中心挂了怎么办?ok, 注册中心集群就来了. 原理图: 注意euraka 之间是通过复制(replicat ...

  3. DBCA Does Not Display ASM Disk Groups In 11.2

    DBCA Does Not Display ASM Disk Groups In 11.2 https://oraclehowto.wordpress.com/2011/08/15/dbca-does ...

  4. C#利用QrCode.Net生成二维码（Qr码

    http://www.cnblogs.com/Soar1991/archive/2012/03/30/2426115.html 现在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二 ...

  5. postman的使用方法详解

    Collections:在Postman中,Collection类似文件夹,可以把同一个项目的请求放在一个Collection里方便管理和分享,Collection里面也可以再建文件夹.如果做API文 ...

  6. ModleAndView类是干什么的？？？

    /** * 启用账号 */ @SuppressWarnings("finally") @RequestMapping(value = "/accountStart&quo ...

  7. C++中float类型的存储

    C++中float用32位来表示,f = (-1)^S * T * 2^E,S是符号位,T是尾数,E是指数 首先我们把f表示成科学计数法的形式,然后再写出其在内存中的表示,在这里T写成1.XXX的形式 ...

  8. 前面部分（WCF全面解析1）

    WCF全面解析 [同力推荐] 我经历了COM时代,一直把Don BOx的<COM本质论>奉为我的指路明灯.能把SOA机理和WCF这种特定厂商实现的技术讲得如<COM本质论>一样 ...

  9. 112. Path Sum (Tree; DFS)

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  10. cocos2dx 触摸屏的使用

    只要继承与CCLayer的类都可以实现触摸功能.CCLayer类的触摸事件的一些接口如下: // 单点触碰 virtual bool ccTouchBegan(CCTouch *pTouch, CCE ...