您的位置：首页 > 其它

全选反选，订单修改删除操作

2016-05-18 09:45 393 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>针对订单进行修改、删除操作</title>
</head>
<script>
var index=    d.rows.length;

function add(){
var d=document.getElementById("t");
var num=d.rows.length;//获取行数
var row=d.insertRow(num);//添加一行
var c=row.insertCell(0);//添加第一个格子
c.innerHTML="手机";//往格子里面添加内容
c=row.insertCell(1);
c.innerHTML="1999";
c=row.insertCell(2);
c.innerHTML="100";
c=row.insertCell(3);
var b1=document.createElement("input");
b1.type="button";
b1.value="删除";
b1.setAttribute("onclick","dele("+num+")");
c.appendChild(b1);
var b2=document.createElement("input");
b2.type="button";
b2.value="修改";
b2.setAttribute("onclick","upgate("+num+")");
c.appendChild(b2)
}

function del(){
var d=document.getElementById("t");
var num=d.rows.length;//获取表格中的元素
d.deleteRow(num-1);
}

function upgateT(){
var d=document.getElementById("first");
d.setAttribute("style","color:red"&&"text-align:center" );
}

function dele(num){
var d=document.getElementById("t");
d.deleteRow(num);
}

function upgate(index){
var d=document.getElementById("t");//根节点table；
var row=d.rows[index];//子节点 tr;
var but=row.cells[3].lastChild;//tr中第四个td中的最后一个（修改按钮）
if(but.value=="修改"){  //修改按钮的属性为修改
var c=row.cells[2]; //tr中的第三个格子
var num=c.innerHTML;//第三个格子中的属性值给num
c.innerHTML="";//清空格子
var text=document.createElement("input");//创建一个input按钮，默认类型是type=text
text.value=num;//value为第三个格子的值
text.size=5; //格子长度为5
text.style="border:1px solid red;";//边框
c.appendChild(text);//插入到格子里面
but.value="确定";//按钮的属性值改成确定
} else
{
var c=row.cells[2];
var v=c.firstChild.value;
c.removeChild(c.firstChild);
c.innerHTML=v;
but.value="修改";
}
}
//全选功能，作用在全选按钮
function getAll(){
var items=document.getElementsByTagName("input");
for(var i=0;i<items.length;i++){
if(items[i].type=="checkbox"){
items[i].checked=all.checked;
}
}
}
//反选功能，作用在单个普通按钮
function getOne(){
var items=document.getElementsByName("one");
var v=true;
for(var i=0;i<items.length;i++){
if(items[i].checked==false){
v=false;
break;
}
}
all.checked=v;

}

</script>

<body>

<table border="1px" width="300px" height="200px" id="t">
<tr id="first"><td><input type="checkbox" id="all" onclick="getAll()" />全选</td><td>商品</td><td>价格</td><td>数量</td><td>操作</td></tr>
<tr><td><input type="checkbox" name="one" onclick="getOne()"   /></td><td>电视机</td><td>2999</td><td>5</td>
<td><input type="button" value="删除" id="1" onclick="dele(1)" /><input type="button" value="修改" onclick="upgate(1)" /></td></tr>
<tr><td><input type="checkbox" name="one" onclick="getOne()"  /></td><td>电冰箱</td><td>2300</td><td>3</td>
<td><input type="button" value="删除"  id="2" onclick="dele(2)" /><input type="button" value="修改" onclick="upgate(2)" /></td></tr>
<tr><td><input type="checkbox" name="one" onclick="getOne()" /></td><td>洗衣机</td><td>999</td><td>2</td>
<td><input type="button" value="删除" id="3" onclick="dele(3)" /><input type="button" value="修改" onclick="upgate(3)" /></td></tr>
<tr><td><input type="checkbox" name="one"  onclick="getOne()" /></td><td>空调</td><td>3500</td><td>10</td>
<td><input type="button" value="删除"  id="4" onclick="dele(4)" /><input type="button" value="修改" onclick="upgate(4)" /></td></tr>
</table>
<br />
<input type="button" value="添加一行" onclick="add()" />
<input type="button" value="删除一行" onclick="del()"/>
<input type="button" value="修改标题行" onclick="upgateT()"/>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航