发表于： 2020-07-24 22:49:15
1 1258
今天完成的事情
学习dom属性的使用
js改变内联样式
其中
confirm("确认删除" + name + "吗？")
与
alert("确认删除" + name + "吗？")
类似，不过confirm有返回按钮
可以设置if语句判断进行使用
内联样式修改
window.onload = function () {
// 点击按钮后修改box1大小
// 获取box1
var box1 = document.getElementById("box1");
// 为按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// 修改box1的宽度
/*
通过js修改元素的样式
语法：元素.style.样式名=样式值
注意:样式中含有-，不合法，去掉-，改为-后首大写字母
*/
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "yellow";
// 点击按钮2以后，读取样式的样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
// 读取box1的样式
/*
语法：元素.style.样式名
通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
*/
alert(box1.style.width);
};
}
};
dom添改删
// 删除tr响应函数
function delA() {
// 点击超链接后需要删除超链接所在的那行
// 这里点击哪个超链接this就是谁
// 获取当前tr
var tr = this.parentNode.parentNode;
// 获取要删除的员工名字
// var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
// 删除之前弹出一个提示框
/*
confirm()用于弹出一个带有确认和取消按钮的的提示框
如果用户点击确认则会返回true，如果点击取消则返回false
*/
var flag = confirm("确认删除" + name + "吗？");
// 如果用户点击确定
if (flag) {
// 删除tr
tr.parentNode.removeChild(tr);
}
// 点击超链接后，超链接会跳转页面，这个是超链接的默认行为，可以通过在响应函数最后return false来取消默认行为
return false;
};
window.onload = function () {
// 1.删除
/* 点击超链接后，删除一个员工的信息 */
// 获取使用额超链接
var allA = document.getElementsByTagName("a");
// 为每个超链接都绑定一个单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = delA;
}
// 2.添加
/* 添加员工的功能 */
// 为按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function () {
// 获取用户添加的员工信息
// 获取员工的名字
var name = document.getElementById("empName").value;
// 获取员工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
// alert(name + "," + email + "," + salary);
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
需要将获取到的信息保存到tr中
*/
// 创建一个tr
var tr = document.createElement("tr");
// 设置tr中的内容
tr.innerHTML = "<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href='javascript:;'>Delete</a></td>";
// 获取刚添加的a元素，并为其绑定单击响应函数
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
/*
// 创建四个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
// 创建一个a元素
var a = document.createElement("a");
// 创建文本节点
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delext = document.createTextNode("Delete");
// 将文本条件放到td中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
// 向a中添加文本
a.appendChild(delext);
// 将a添加到td中
aTd.appendChild(a);
// 将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
// 向a中添加href属性
a.href = "javascript:;"
// 为新添加的a在绑定一次单击响应函数
a.onclick = delA;
*/
// 获取table
var employeetable = document.getElementById("employeetable");
// 获取employeetable中的tbody
var tbody = employeetable.getElementsByTagName("tbody")[0];
// 将tr添加到table中
tbody.appendChild(tr);
/*
tbody.innerHTML += "<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href='javascript:;'>Delete</a></td>"
+ "</tr>";
*/
};
};
返回列表
评论