首页 > 代码库 > js中的Dom事件模型以及表格方面等内容
js中的Dom事件模型以及表格方面等内容
1、实现评论页面的制作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside{
width: 1000px;
margin: 0 auto;
border: 1px solid #E7EAEE;
overflow: hidden;
padding-bottom: 15px;
}
#outside h3{
width: 95%;
margin: 15px auto;
padding-bottom: 10px;
border-bottom: 1px solid #E7EAEE;
font-family: "宋体",sans-serif;
}
#outside .comment1{
width: 95%;
margin: 10px auto;
color: #BBBBBB;
font-size: 12px;
border-bottom: 1px dashed #E7EAEE;
font-family: "宋体",sans-serif;
}
#outside .comment1 time{
float: right;
}
#outside .comment1 span{
color: #5979B2;
margin-left: 5px;
font-weight: bold;
}
#outside .comment1 p{
font-size: 16px;
color: black;
}
#outside h4{
width: 95%;
margin: 15px auto;
color: #404E73;
font-size: 16px;
font-weight: bold;
font-family: "宋体",sans-serif;
}
#outside #addComment{
width: 95%;
margin: 0 auto;
font-size: 12px;
color: #BBBBBB;
}
#outside #name{
width: 200px;
border: 1px solid #D9E2EF;
}
#outside #comContent{
width: 800px;
height: 100px;
resize: none;
border: 1px solid #D9E2EF;
vertical-align: text-top;
}
#outside button{
width: 100px;
height: 30px;
background-color: #2D46A3;
color: white;
border: hidden;
float: right;
margin: 15px 100px;
}
</style>
</head>
<body>
<div id="outside">
<h3>最新评论</h3>
<div id="comment">
<div id="comment1" class="comment1">
腾讯网友
<span>陈二狗的妖孽人生</span>
<time>2010年10月5日 19:21:12</time>
<p>
厉害了 我的哥！！
</p>
</div>
</div>
<h4>发表评论</h4>
<div id="addComment">
昵 称：<input type="text" id="name" />
<br /><br />
评论内容:<textarea id="comContent"></textarea>
<button onclick="addComment()">提交评论</button>
</div>
</div>
</body>
<script type="text/javascript">
var idNum = 1;
function addComment(){
idNum++;
var inputValue = http://www.mamicode.com/document.getElementById("name").value;
var textValue = http://www.mamicode.com/document.getElementById("comContent").value;
if(inputValuehttp://www.mamicode.com/==""||textValuehttp://www.mamicode.com/==""){
alert("昵称和评论内容不能为空！！");
return;
}
var comContent1 = document.getElementById("comment1");
var newComment = comContent1.cloneNode(true);
newComment.setAttribute("id","comment"+idNum);
newComment.getElementsByTagName("span")[0].innerText = inputValue;
newComment.getElementsByTagName("p")[0].innerText = textValue;
var commentDiv = document.getElementById("comment");
commentDiv.appendChild(newComment);
document.getElementById("name").valuehttp://www.mamicode.com/= "";
document.getElementById("comContent").valuehttp://www.mamicode.com/= "";
}
</script>
</html>
2、模仿删除修改用户
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#table{
width: 500px;
border-collapse: collapse;
}
#table td,th{
border: 1px solid #BCBCBC;
height: 30px;
}
#table th{
color: white;
background-color: #95B3D7;
}
#table td{
color:#3F3F3F;
font-size: 12px;
}
#table td:first-child{
text-align: center;
}
#table td:last-child{
text-align: center;
color: #0662AE;
}
</style>
<script type="text/javascript">
function deleteRow(num){
var table = document.getElementById("table");
var row = table.rows[num];
var isDel = confirm("确定要删除吗？");
if(!isDel){
alert("取消删除！");
return;
}
for (var i=0;i<row.cells.length;i++) {
row.cells[i].style.cssText = "text-decoration: line-through;color:#929292;"
}
row.cells[row.cells.length-1].lastElementChild.removeAttribute("onclick");
row.cells[row.cells.length-1].firstElementChild.removeAttribute("onclick");
row.lastElementChild.firstElementChild.innerHTML = "修改";
row.setAttribute("contenteditable","false");
}
function updateRow(num){
var table = document.getElementById("table");
var row = table.rows[num];
var spanText = row.cells[row.cells.length-1].firstElementChild;
if(spanText.innerText=="修改"){
spanText.innerText="完成";
for (var i=0;i<row.cells.length-1;i++) {
row.cells[i].setAttribute("contenteditable","true");
}
}else{
spanText.innerText="修改";
for (var i=0;i<row.cells.length-1;i++) {
row.cells[i].setAttribute("contenteditable","false");
}
}
}
var isAlt = 0;
var isEnt = 0;
document.onkeydown = function(e){
if(e.keyCode==18){
isAlt = 1;
}
if(e.keyCode==13){
isEnt = 1;
}
var table = document.getElementById("table");
var rows = table.rows;
if(isEnt==1&&isAlt==0){
for (var i=1;i<rows.length;i++) {
for (var j=0;j<rows[i].cells.length-1;j++) {
rows[i].cells[j].setAttribute("contenteditable","false");
}
rows[i].lastElementChild.firstElementChild.innerText
="修改";
}
}else if(isEnt==1&&isAlt==1){
document.activeElement.innerHTML = document.activeElement.innerHTML+"<br/>";
}
}
document.onkeyup = function(e){
if(e.keyCode==13){
isEnt = 0;
}else if(e.keyCode==18){
isAlt = 0;
}
}
/*
*【JS中的DOM0事件模型】
* 1、内容模型：直接将函数名作为HTML标签的某个事件属性的属性值;
* rg:<button onlick="func()">按钮</button>
*2、脚本模型：在JS脚本中通过事件属性进行绑定 ；
* eg：window.onlead = function（）{}
* 局限性：同一个节点只能绑定一个同类型事件
*
* 【JS中的DOM2事件模型】
* 1、添加事件绑定：btn1.addEvent（"onlick"函数）
* 其他浏览器：btn1btn1.addEventListener（"click"函数 ，true/false）；
* 参数三：false（默认）;表示事件冒泡，true:表示事件捕获
* 兼容写法：if（btn1btn1.addchEvent）{
* btn1.btn1.addchEvent
* }else{
* btn1.btn1.addEventListener（）
* }
* 优点：同意节点，可以添加多个同类型事件的监听器
*
* 2、取消事件绑定：
* 注 如果取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，二不能使用匿名函数，
* 因为在取消事件绑定时，需传入函数名
* removeEventListener（“click，函数名）
* detachEvent("onclick"函数名)
*
* 3、阻断事件冒泡 :
* （1） IE浏览器中将e.canceBubble属性设为true
* 其他浏览器：调用e.stopPropagetion（）;方法
* 兼容写法：function myParagraphEventHandler(e) {
* e = e || window.event;
* if (e.stopPropagation) {
* e.stopPropagation(); //IE以外
* } else {
* e.cancelBubble = true; //IE
* }
* }
* （2） 阻止默认事件：
* IE浏览器中：将e.returnValue属性设为false；
* 其他浏览器：调用e.preventDefault();方法
* 兼容写法：function eventHandler(e) {
* e = e || window.event;
* // 防止默认行为
* if (e.preventDefault) {
* e.preventDefault(); //IE以外
* } else {
* e.returnValue = http://www.mamicode.com/false; //IE
* }
* }
*
*
*
* */
window.onlead = function(){
var btn1 = document.getAnonymousElementById("btn1");
console.log(btn1.attachEvent)
console.log(btn1.addEventListener);
}
window.onlead = function(){
var btn1 = document.getElementById("btn1")
btn1.addEventListener("click",function(){
alert(1);
false})
}
window.onlead = function(){
alert(2);
}
</script>
</head>
<body>
<button id="btn1">点击我弹个窗</button>
<button id="btn1">点击我就是不让它弹</button>
/*
【JS中的事件流】
1、元素冒泡：当某DOM元素触发 某事件是时 会从当前DOM元素开始，逐个触发其祖先元素的同类事件，指导DOM根节点
DOM模型 均为冒泡事件
IE中使用，attachEvent（）添加的事件 均为冒泡
其他浏览器，.addEventListener添加事件 ，当三个事件参数为false时 为冒泡
2、事件捕获 ：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，知道触发到当前元素为止
只能使用.addEventListener添加事件，并设置四三个参数为ture时，才能进行捕获当前元素
冒泡：当前元素---根节点 捕获：根节点---当前元素
*/
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
<body>
<table id="table">
<tr>
<th>用户ID</th>
<th>用户名</th>
<th>手机号码</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td>zhangsan</td>
<td>张三</td>
<td>13888888888</td>
<td>可用</td>
<td>
<span onclick="updateRow(1)">修改</span>
<span onclick="deleteRow(1)">删除</span>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>张三</td>
<td>13888888888</td>
<td>可用</td>
<td>
<span onclick="updateRow(2)">修改</span>
<span onclick="deleteRow(2)">删除</span>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>张三</td>
<td>13888888888</td>
<td>可用</td>
<td>
<span onclick="updateRow(3)">修改</span>
<span onclick="deleteRow(3)">删除</span>
</td>
</tr>
</table>
</body>
</html>
3、投票网页的制作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
text-decoration: none;
}
#vote{
margin: 50px;
border: 2px solid #80ABD7;
font-size: 12px;
padding-bottom: 20px;
}
#vote .top{
line-height: 30px;
background-color: #80ABD7;
color: white;
padding-left: 10px;
}
#vote #bottom{
margin-left: 60px;
padding: 15px 0px 15px 0px;
}
#vote #button{
margin-left: 60px;
}
#vote #button button{
padding: 3px 13px;
background-color: #4A6991;
color: white;
font-weight: bold;
border: none;
border-radius: 4px;
}
#vote #button a{
font-size: 12px;
margin-left: 10px;
}
#vote #bottom .div{
margin-top: 15px;
}
</style>
</head>
<body>
<section id="vote">
<p class="top">添加新投票</p>
<div id="bottom">
<span>投票内容：</span>
<input type="text" name="content" id="content" value="" />
<br /><br />
<span>投票类型：</span>
<input type="radio" name="radio" id="radio1" value="http://www.mamicode.com/1" checked="checked"/>单选
<input type="radio" name="radio" id="radio2" value="" />多选
<div id="div1" class="div">
<span id="span1">投票选项：</span>
<input type="text" name="input1" id="input1" value="" />
</div>
<div id="div2" class="div">
<span id="span2"> </span><input type="text" name="input1" id="input2" value="" />
</div>
<!--<br /><br />
<input type="text" name="input1" id="input3" value="" /> <a href="http://www.mamicode.com/#">删除</a>
<br /><br />
<input type="text" name="input1" id="input4" value="" /> <a href="http://www.mamicode.com/#">删除</a>-->
</div>
<div id="button">
<button>确定<button>
<a href="http://www.mamicode.com/#" style="text-decoration: underline;" id="big" onclick="more()">增加选项</a>
<a href="http://www.mamicode.com/#" id="small" onclick="close()">取消操作</a>
</div>
<section>
</body>
<script type="text/javascript">
var div2=document.getElementById("div2");
var voteBottom=document.getElementById("bottom");
var idNum=2;
function more(){
idNum++;
var divNew=div2.cloneNode("div2");
divNew.setAttribute("id","div"+idNum);
var divNewHTML=divNew.innerHTML;
divNew.innerHTML=divNewHTML+"<span id=‘shanchu‘ style=‘color:blue;‘ onclick=‘delate("+idNum+")‘>删除</span>";
voteBottom.appendChild(divNew);
}
function delate(num){
var divDelate=document.getElementById("div"+num);
divDelate.style.display="none";
}
function close(){
window.closed;
}
console.log(document.styleSheets);
</script>
<html>
js中的Dom事件模型以及表格方面等内容