练习题。对DOM中document的深刻理解巩固
//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的深刻理解巩固的更多相关文章
- DOM中document对象的常用属性方法
每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返 ...
- js基础之DOM中document对象的常用属性方法
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
- Android:LinearLayout布局中Layout_weight的深刻理解
首先看一下LinearLayout布局中Layout_weight属性的作用:它是用来分配属于空间的一个属性,你可以设置他的权重.很多人不知道剩余空间是个什么概念,下面我先来说说剩余空间. 看下面代码 ...
- DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
- 深刻理解Java中final的作用(一):从final的作用剖析String被设计成不可变类的深层原因
声明:本博客为原创博客,未经同意,不得转载!小伙伴们假设是在别的地方看到的话,建议还是来csdn上看吧(原文链接为http://blog.csdn.net/bettarwang/article/det ...
- [转]深刻理解Python中的元类(metaclass)以及元类实现单例模式
使用元类 深刻理解Python中的元类(metaclass)以及元类实现单例模式 在看一些框架源代码的过程中碰到很多元类的实例,看起来很吃力很晦涩:在看python cookbook中关于元类创建单例 ...
- 深刻理解 React (一) ——JSX和虚拟DOM
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/155 来源:腾云阁 https://www.qclou ...
- 深刻理解Java中的String、StringBuffer和StringBuilder的差别
声明:本博客为原创博客,未经同意.不得转载!小伙伴们假设是在别的地方看到的话,建议还是来csdn上看吧(链接为http://blog.csdn.net/bettarwang/article/detai ...
- javascript判断元素存在和判断元素存在于实时的dom中的方法
今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...
随机推荐
- css ! important 兼容性的一点测试
css ! important 这个东西网上一堆内容,我只说我用到的一点地方和我的理解, 这个东西ie6不支持,ie高版本是支持的.其他浏览器也是支持.先理解这一点 .abc { width:100p ...
- CocoStudio创建动画帧
进入动画编辑器 选择“形体模式” 右键点击资源窗口的资源,可以进行删除,重命名的操作: 可以再资源窗口下方的预览窗口,查看选中的资源预览效果图: 右键点击“对象结构”,创建图层 选择“动画模式” 右 ...
- 未注册在本地的Windows 2008 / Windows 7 X64的:'Microsoft.Jet.OLEDB.4.0'提供
在服务器上部署项目的时候遇到如下错误:'Microsoft.Jet.OLEDB.4.0'提供在本地没有注册 服务器是WIN2008 导致这个错误主要有几个原因: 1,服务器上没有装MS Excel中的 ...
- Windows C盘文件夹介绍及说明
Documents and Settings是什么文件? 答案: 是系统用户设置文件夹,包括各个用户的文档.收藏夹.上网浏览信息.配置文件等. 补:这里面的东西不要随便删除,这保存着所有用户的文档和账 ...
- 根据不同分辨率载入相应CSS样式表
index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- CentOS7修改ssh端口
http://www.cnblogs.com/rwxwsblog/p/5756894.html 修改/etc/ssh/sshd_config vi /etc/ssh/sshd_config #Port ...
- C#中如何判断线程当前所处的状态
转自原文 在C#中如何判断线程当前所处的状态 在C#中,线程对象Thread使用ThreadState属性指示线程状态,它是带Flags特性的枚举类型对象. ThreadState 为线程定义了 ...
- 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 17—Large Scale Machine Learning 大规模机器学习
Lecture17 Large Scale Machine Learning大规模机器学习 17.1 大型数据集的学习 Learning With Large Datasets 如果有一个低方差的模型 ...
- DAVINCI开发原理
本文中约定: [host] 表示主机PC机Linux [target] 表示目标板Linux DAVINCI开发原理之一----ARM端开发环境的建立(DVEVM) 1. 对DAVINCI平台,TI在 ...
- spring中bean 的属性id与name