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

最新推荐文章于 2022-10-20 21:43:08 发布

陈小煋

最新推荐文章于 2022-10-20 21:43:08 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript js 脚本

本文链接：https://blog.csdn.net/Star_Chan/article/details/51441392

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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" οnclick="getAll()" />全选</td><td>商品</td><td>价格</td><td>数量</td><td>操作</td></tr>
<tr><td><input type="checkbox" name="one" οnclick="getOne()"   /></td><td>电视机</td><td>2999</td><td>5</td>
<td><input type="button" value="删除" id="1" οnclick="dele(1)" /><input type="button" value="修改" οnclick="upgate(1)" /></td></tr>
<tr><td><input type="checkbox" name="one" οnclick="getOne()"  /></td><td>电冰箱</td><td>2300</td><td>3</td>
<td><input type="button" value="删除"  id="2" οnclick="dele(2)" /><input type="button" value="修改" οnclick="upgate(2)" /></td></tr>
<tr><td><input type="checkbox" name="one" οnclick="getOne()" /></td><td>洗衣机</td><td>999</td><td>2</td>
<td><input type="button" value="删除" id="3" οnclick="dele(3)" /><input type="button" value="修改" οnclick="upgate(3)" /></td></tr>
<tr><td><input type="checkbox" name="one"  οnclick="getOne()" /></td><td>空调</td><td>3500</td><td>10</td>
<td><input type="button" value="删除"  id="4" οnclick="dele(4)" /><input type="button" value="修改" οnclick="upgate(4)" /></td></tr>
</table>
<br />
<input type="button" value="添加一行" οnclick="add()" />
<input type="button" value="删除一行" οnclick="del()"/>
<input type="button" value="修改标题行" οnclick="upgateT()"/>


</body>
</html>