JavaScript中使用按钮给列表增加一行删除一行

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 这个子类
        }

需要删除哪一行就定位哪一行

最后希望大家好好注意身体,看到的也算是有缘人了,别太累了注意休息~ ?

  • 6
    点赞
  • 29
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一块黑色巧克力

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值