第一天记录
记录第一天的学习
题目要求：
1.点击单元格的内容 弹窗 promre 接收值 将接收的值替换单元格的内容
2.点击单元格出现两个按钮 加粗 字体颜色标红
《步骤》
（1）给点击的元素加属性 为了区分的对象
（2）给按钮加点击事件
（3）找到元素修改样式
3.再创建一行
《步骤》
（1）获取所有的 td 标签
（2）循环 td 给每一个 td 加上 onclick 属性
《代码》
/*给所有元素添加 onclick 事件*/
<html>
<head>
<script type="text/javascript">
function modTwo(){
var tdArr = document.getElemensByTagName("td");
for(var i = 0; i < tdArr.length;i++ ){
tdArr[i].setAttribute("onclick","modone(this)");
tdArr[i].style.cursor = "pointer";
}
}
</script>
</head>
</html>
《步骤》
1.给单元格添加点击事件
2.方法内逻辑 弹窗接收客户的输入 >= 保存在一个变量里边
3.找到要修改内容的单元格，通过操作的内容把用户输入的值替换进去
<html>
<head>
<script type="text/javascript">
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");
}
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
//加粗按钮
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");
}
}
}
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
//字体变红按钮
function bh(){
//td_obj是全局变量
td_obj.style.color = "red";
//按钮显示
var div = document.getElementById("dd");
div.style.display = "none";
}
</script>
</head>
</html>
《步骤》
1.找到父元素（往这里面添加元素）
2.创建元素 tr td
（1）创建tr元素 创建td元素
（2）把td元素放到tr元素里
3.把tr元素放到父元素里
<html>
<head>
<script type="text/javascript">
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 = "李四";
// 把td元素放到tr元素里面
trObj.appendChild(tdObj);
}
// 3、把tr放到父元素
tableObj.appendChild(trObj);
var div = document.getElementById("dd");
}
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
</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>
