js中比较实用的函数用法
<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> 点击修改调用updateRow(num)函数，将num赋值为1
<span onclick="deleteRow(1)">删除</span> 点击删除调用deleteRow(num)函数，将num赋值为1
</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>
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 onclick="changeBanner(1)">1</li>
<li onclick="changeBanner(2)">2</li>
<li onclick="changeBanner(3)">3</li>
<li onclick="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 onclick="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 = "";
}
