//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. 浅谈PHP面向对象编程（四、类常量和静态成员）

    4.0 类常量和静态成员 通过上几篇博客我们了解到,类在实例化对象时,该对象中的成员只被当前对象所有.如果希望在类中定义的成员被所有实例共享. 此时可以使用类常量或静态成员来实现,接下来将针对类常量和 ...

  2. Java多线程面试问题集锦

    参看:http://www.importnew.com/1428.html

  3. 3_python之路之商城购物车

    python之路之商城购物车 1.程序说明:Readme.txt 1.程序文件:storeapp_new.py userinfo.py 2.程序文件说明:storeapp_new.py-主程序 use ...

  4. supervisor+uwsgi+django遇到writing to a closed pipe/socket/fd解决

    原因: 最近开发的一个项目,由于有个更新job需要消耗的时间非常长,一度以为更新出现了错误. 经过: 于是打开debug模式测试, 异常开启,调试发现system返回了 writing to a cl ...

  5. spring 的xml配置使用p标签简化

    1.常见配置 比如配置数据源 读取properties <!-- 配置阿里巴巴数据源 --> <bean id="dataSource" class=" ...

  6. Tkinter Message

    Python GUI - Tkinter Message(消息):这个小工具提供了一个多和不可编辑的对象,显示文本,自动断行和其内容的理由.   这个小工具提供了一个多和不可编辑的对象,显示文本,自动 ...

  7. sql之分段统计

    sql之分段统计 需求:获取一个县所有家庭人数在1-2人,3-4人,5-6人,6人以上的家庭数的数组 思路:通过CASE WHEN 将 CBFCYSL分组,然后统计数据条数. 语句: SELECT T ...

  8. 03-22 Ajax验证用户登录

    在网页中一般是通过表单提交数据,而表单获取信息,抛弃当前页面重新加载一个新页面. 现在,在webform网页中可以通过JueryAjax提交.处理数据的方式,达到异步刷新页面. 表单提交数据和Juer ...

  9. IOS Background 之 Background Fetch

    http://www.ithao123.cn/content-1363653.html 定期更新数据的app,比如及时通信类,微博等app. 定期后台获取,等打开后获取的快一些. 30分钟后打开手,获 ...

  10. Elasticsearch-PHP 安装

    安装 Elasticsearch-PHP只有三个要求你需要担心: PHP 5.3.9 或更高版本(查看更多信息) Composer ext-curl: Libcurl的PHP扩展 其它的依赖会通过Co ...