JavaScriptt 增加表格一行 ?
首先我们需要理清一下思路
- 首先需要找到列表的父类坐标(我一般喜欢放在tboay中,thead我会放表格的标题)
- 创建一个行 和多个列 将列放入在行中
- 给列添加内容
- 将创建好的行插入到指定位置
行吧废话不多说了我就直接上代码了?(首先需要创建一个列表)
<table border="1" cellspacing="0" width="600"> // 设置好表格
<thead> //头部放不能被删除的 列表标题
<tr>
<td><div>商品名称</div></td>
<td><div>数量</div></td>
<td><div>价格</div></td>
<td><div>操作</div></td>
</tr>
</thead>
<tbody id="aaaa"> // 中部放可以被删除或者添加的列表区域
<tr>
<td>防滑真皮休闲鞋</td>
<td><div>123</div></td>
<td><div>¥568.50</div></td>
<td>
<input name="in1" type="button" value="删除" onclick="inasdaa1(this)">
<input type="button" value="修改" onclick="inAndOut1(this)">
</td>
</tr>
<tr>
<td>抗疲劳神奇钛项圈</td>
<td><div>123</div></td>
<td><div>¥48.00</div></td>
<td>
<input name="in1" type="button" value="删除" onclick="inasdaa1(this)">
<input type="button" value="修改" onclick="inAndOut1(this)">
</td>
</tr>
</tbody>
<tfoot> // 底部也放入不能被删除和添加的区域
<tr>
<td colspan="4"> //合并了四个列
<input type="button" value="增加订单" onclick="add1(this)"> //创建了一个按钮
</td>
</tr>
</tfoot>
</table>
效果是这样的
接下来我么需要写出javascript
<script type="text/javascript">
function add(_obj){ //增加一行
var a = document.getElementById("aaaa"); //定位在tbody 拿出值
var tr = document.createElement("tr"); //创建一个行<tr>
tr.innerHTML = "<td>防滑真皮休闲鞋</td>" + "<td><div>123</div>" +"<td><div>¥568.50</div></td>" +"<td>"
+ "<input name=\"in1\" type=\"button\" value=\"删除\" οnclick=\"inasdaa1(this)\">" +" "+
"<input type=\"button\" id=\"id1\" value=\"修改\" οnclick=\"inAndOut1(this)\">" + "</td>";
//?上面可能会有一点点乱希望大家仔细看看
a.appendChild(tr); //将创建的<tr>加入到定位的tbody下
}
这样子就可以在列表中加入新的一行(注意:加入的行列格式最好是和创建的行列格式一直 !⚠⚠)
JavaScript中列表删除一行
相比于添加删除就简单一些(思路)
- 首先需要找到列表的父类坐标(一样要找坐标)
- 找到需要删除的行 坐标
- 直接删除(是的,这方便多了?)
不说了,来看代码 ?
function inasdaa1(_obj){ //删除当前行(这里我就不写 script 这个格式了)
var a = document.getElementById("aaaa"); //一样 需要找到 表格的父类
var a1 = _obj.parentNode.parentNode; // 找到需要删除的位置 ,当按钮触发时直接传入自己进来 这样就拿到了位置
a.removeChild(a1); // 直接 remove 这个子类
}
需要删除哪一行就定位哪一行
最后希望大家好好注意身体,看到的也算是有缘人了,别太累了注意休息~ ?