//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>