添加订单/添加节点

最新推荐文章于 2023-01-03 20:22:34 发布

程序媛杜可爱

最新推荐文章于 2023-01-03 20:22:34 发布

阅读量554

点赞数 1

CC 4.0 BY-SA版权

文章标签： dom

本文链接：https://blog.youkuaiyun.com/qq_43198747/article/details/86580351

这是一个HTML示例，演示如何动态添加表格行。通过JavaScript实现点击按钮时克隆现有行并将其添加到表格中，用于模拟添加订单或节点的功能。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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:400px;
}
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>

<tbody>
<tr id="del1">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' /></td>
</tr>
</tbody>
<tr>

<td colspan="4" style="height:30px;">
<input name="addOrder" type="button" value="增加订单" onclick="addRow()" /></td>
</tr>
</table>
<script>
var order=document.getElementById('order');
var tb=order.getElementsByTagName('tbody')[0];
function addRow(){
var ort=document.getElementById('dell').cloneNode(true)
tb.appendChild(ort);
}
</script>
</body>
</html>