function deleteRow(num){
var table = document.getElementById("table"); var row = table.rows[num]; var isDel = confirm("确定要删除吗？"); 通过将confirm的值赋给isDel来判断点击的是那个键 if(!isDel){ isDel的值为假，执行if结束函数。 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"); 移除本行最后一个单元格的onclick属性 row.cells[row.cells.length-1].firstElementChild.removeAttribute("onclick"); 移除本行最后一个单元格的onclick属性 row.lastElementChild.firstElementChild.innerHTML = "修改"; row.setAttribute("contenteditable","false"); 将本行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=="修改"){ 如果本行最后一个单元格里的内容是修改，执行if将其改为完成，除最后一个单元格内容可修改 spanText.innerText="完成"; for (var i=0;i<row.cells.length-1;i++) { row.cells[i].setAttribute("contenteditable","true"); } }else{ spanText.innerText="修改"; 如果本行最后一个单元格里的内容是完成，执行else将其改为修改，单元格内容不可修改 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; 按下的是alt } if(e.keyCode==13){ isEnt = 1; 按下的是enter } var table = document.getElementById("table"); var rows = table.rows; if(isEnt==1&&isAlt==0){ 只按enter本行修改完成，将修改改成完成，contenteditable改为false。 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){ enter 和alt同时按，换行。 document.activeElement.innerHTML = document.activeElement.innerHTML+"<br/>"; } } document.onkeyup = function(e){ 键盘抬起，令isEnt ，isAlt=0，上方if全不满足，按键失效。 if(e.keyCode==13){ isEnt = 0; }else if(e.keyCode==18){ isAlt = 0; } }以上js实现的效果：点击修改使前四列成为可编辑状态，点击删除弹出提示是否删除，点击回车结束修改状态，修改状态点击完成结束修改状态使表格不能修改。
js实现banner图切换
<div id="banner">
<div id="inside"><img src="img/banner1.png" id="img1" /><img src="img/banner2.png" id="img2" /><img src="img/banner3.png" id="img3" /><img src="img/banner4.png" id="img4" /><img src="img/banner1.png" id="img5" /> 这样写是为了img之间没有空隙 </div><ul id="bannerNum"> 点击相应的1，2，3，4调用changeBanner(num1)函数，将num赋值为1，2，3，4.
<li οnclick="changeBanner(1)">1</li> <li οnclick="changeBanner(2)">2</li> <li οnclick="changeBanner(3)">3</li> <li οnclick="changeBanner(4)">4</li> </ul> </div>js函数：
var num = 1; 定义全局变量num和inside
var inside; window.onload = function(){ 用于让banner图自动切换的函数 inside = document.getElementById("inside"); var interval = setInterval(function(){ 每2秒执行一次此函数 inside.style.transition = "all 1s ease"; num++; 每执行一次函数让num+1； switch (num){ 根据num的值判断此时应做的改变，因为图宽1920px，所以每执行一次函数让banner的div向左走1920px。 case 1: inside.style.transition = "none"; inside.style.marginLeft = (-960)+"px"; break; case 2: inside.style.marginLeft = (-960-1920)+"px"; break; case 3: inside.style.marginLeft = (-960-1920*2)+"px"; break; case 4: inside.style.marginLeft = (-960-1920*3)+"px"; break; case 5: inside.style.marginLeft = (-960-1920*4)+"px"; num = 0; banner图轮完一遍，让num归0，banner的div回归第一张图居中的状态。 break; default: break; } },2000); } function changeBanner(num1){ 通过调用时赋给num1 的值判断应显示第几张图改变相应的div的margin-left值 inside.style.transition = "none"; switch (num1){ case 1: inside.style.marginLeft = (-960)+"px"; break; case 2: inside.style.marginLeft = (-960-1920)+"px"; break; case 3: inside.style.marginLeft = (-960-1920*2)+"px"; break; case 4: inside.style.marginLeft = (-960-1920*3)+"px"; break; default: break; } num = num1-1; }
发表新评论：
<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 οnclick="addComment()">提交评论</button> </div> </div>js函数写法：
var idNum = 1;
function addComment(){ idNum++; 用2，3，4……来给新增的每一行命名不同的id。 var inputValue = document.getElementById("name").value; 取到在昵称一栏中输入的内容赋值给inputValue var textValue = document.getElementById("comContent").value; 取到在评论一栏中输入的内容赋值给textValue if(inputValue==""||textValue==""){ 判断输入是否为空，如果为空，弹窗提示函数结束。 alert("昵称和评论内容不能为空！！"); return; } var comContent1 = document.getElementById("comment1"); 取到评论一一行， var newComment = comContent1.cloneNode(true); 复制评论一和它的所有子元素， newComment.setAttribute("id","comment"+idNum); 将新的评论的id改为comment+相应的idNum值， newComment.getElementsByTagName("span")[0].innerText = inputValue; 将所复制的新的评论的span内容改为取到的昵称一栏的内容，即inputValue newComment.getElementsByTagName("p")[0].innerText = textValue; 将所复制的新的评论的p内容改为取到的评论一栏的内容，即textValue var commentDiv = document.getElementById("comment"); 取到评论div的父容器，将新评论div插入到该父容器的最后，成为它的最后一行。 commentDiv.appendChild(newComment); document.getElementById("name").value = ""; 提交评论后将输入内容清空 document.getElementById("comContent").value = ""; }