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

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

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