//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. Autofac ASP.NET Web API (Beta) Integration

    With the beta release of ASP.NET MVC 4 and the ASP.NET Web API being released a few weeks ago, I dec ...

  2. Vue源码（一）

    入口文件 src/core/instance/index.js 中可以看到 function Vue (options) { if (process.env.NODE_ENV !== 'product ...

  3. Python Twisted系列教程19：改变之前的想法

    作者:dave@http://krondo.com/i-thought-i-wanted-it-but-i-changed-my-mind/  译者: Cheng Luo 你可以从”第一部分 Twis ...

  4. 第四章：重构代码[学习Android Studio汉化教程]

    第四章 Refactoring Code The solutions you develop in Android Studio will not always follow a straight p ...

  5. vs2010 安装 Ajax Control Toolkit

    Ajax Control Toolkit 7.1005.0 The Ajax Control Toolkit contains a rich set of controls that you can ...

  6. Flask之模板web表单

    3.3 Web表单: web表单是web应用程序的基本功能. 它是HTML页面中负责数据采集的部件.表单有三个部分组成:表单标签.表单域.表单按钮.表单允许用户输入数据,负责HTML页面数据采集,通过 ...

  7. Mysql总结（二）

    数据库.表.字段.行 问:查询姓黄或洪的男生分析:数据从哪来,哪个表stu条件:姓黄或洪name or and 男生gender答:select * from stu where gender=1 a ...

  8. 六、配置github的pull request触发jenkins自动构建

    之前的配置,都是向master分支push操作触发jenkins进行构建,但是在一般的正常工作中,不会允许程序员直接向主分支推送代码:正常都是fork一个本地的分支,在本地分支调试完后,向主干分支提交 ...

  9. django网页的分页功能，大家如果有疑问请留言

    url文件 from django.contrib import admin from django.conf.urls import url from app01 import views urlp ...

  10. 基本SQL命令 (1.SQL命令使用规则/2.库管理/3.表管理/4.表记录管理/5.更改库，库的默认字符集/6.连接数据库的过程/7.数据类型）

    1.SQL命令的使用规则       1.每条命令必须以 ; 结尾       2.SQL命令不区分字母大小写       3.使用 \c 终止SQL命令的执行 2.库的管理     1.库的基本操作 ...