表格增删改

最新推荐文章于 2022-03-02 22:55:39 发布

yuxiaoyu.

最新推荐文章于 2022-03-02 22:55:39 发布

阅读量118

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haijuanya/p/9324703.html

版权

<title></title>
<style type="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #333;
border-left: 1px solid #333;
width:800px;
}
td{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-align:center;
}
.title{
font-weight:bold;
background-color: #cccccc;
}

</style>

</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
</tr>
<tr id="del1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>¥568.50</td>
    <td><input name="rowdel" type="button" value="删除" οnclick='delRow(event)' /></td>
</tr>
<tr>
    <td colspan="4" style="height:30px;">
    <input name="addOrder" type="button" value="增加订单" οnclick="addRow(event)" /></td>
</tr>
</table>
  <script type="text/javascript">
   function delRow(e){
    var btn = e.target;
    var tr = btn.parentElement.parentElement;
    if(confirm("确定删除此行？")){
     tr.remove();
    }
   }

   function addRow(){
    //获取表格
    var table = document.querySelector("#order tbody");
    //获取表格最后一行
    var lastTr = table.querySelector("tr:last-child");
    //创建一个新tr
    var newTr = document.createElement("tr");
    //tr里面的格式为需要增加订单的格式
    newTr.innerHTML = '<td><input type="text" name="name" value=""/></td>'
        +'<td><input type="text" name="number" value=""/></td>'
        +'<td><input type="text" name="price" value=""/></td>'
        +'<td><input type="button" name="filed" value="删除" οnclick="delRow(event)">'
        +'<input type="button" name="sure" value="确定" οnclick="editRow(event)"></td>'
    //在表格里面增加新行
    table.insertBefore(newTr,lastTr);
    }
    //如果点击确定则将编辑行转换为文本行，点击修改则将文本行转换为编辑行
   function editRow(e){
    //获取点击按钮
    var btn = e.target;
    if(btn.value=="确定"){
     btn.value = "修改";
     var lastTd = btn.parentElement;//按钮的父级是td
     //最后一个td前一个是价格
     var priceTd = lastTd.previousSibling;//接收最后一个td的前一个td
     var price = priceTd.querySelector("input").value;//接收这个td里面的input
     priceTd.innerHTML = price;//将priceTd这一行赋值给price

     var numberTd = priceTd.previousSibling;
     var num = numberTd.querySelector("input").value;
     numberTd.innerHTML = num;

     var nameTd = numberTd.previousSibling;
     var name = nameTd.querySelector("input").value;
     nameTd.innerHTML = name;
    }else{
     btn.value = "确定";
     var lastTd = btn.parentElement;//按钮的父级是td

     var priceTd = lastTd.previousSibling;
     var price = priceTd.innerHTML;
     priceTd.innerHTML = '<input type="text" name="prices" value="'+price+'"/>' ;

     var numTd = priceTd.previousSibling;
     var num1 = numTd.innerHTML;
        numTd.innerHTML = '<input type="text" name="numbers" value="'+num1+'"/>' ;

     var nameTd = numTd.previousSibling;
     var names = nameTd.innerHTML;
     nameTd.innerHTML = '<input type="text" name="names" value="'+names+'"/>' ;
    }
    }
  </script>
</body>
</html>

转载于:https://www.cnblogs.com/haijuanya/p/9324703.html

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格增删改

<title></title><style type="text/css">body{font-size:13px;line-height:25px;}table{border-top: 1px solid #333;border-left: 1px solid #333;width:800px;}td{border-right: 1...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。