js添加删除行

最新推荐文章于 2022-09-11 13:15:32 发布
最新推荐文章于 2022-09-11 13:15:32 发布
阅读量1.6k 收藏
点赞数
分类专栏： WebForm 文章标签： cgi input javascript function table button 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function insertRow(tbIndex) {
            var objRow = Binddata.insertRow(tbIndex);
            var objCel = objRow.insertCell(0);

            objCel.style.display = "none";
            objCel.innerText = tbIndex;

            var objCel = objRow.insertCell(1);
            objCel.innerText = document.getElementById("myCell1").value;

            var objCel = objRow.insertCell(2);
            objCel.innerText = document.getElementById("myCell2").value;

            var objCel = objRow.insertCell(3);
            objCel.innerText = document.getElementById("myCell3").value;

            var objCel = objRow.insertCell(4);
            objCel.innerText = document.getElementById("myCell4").value;

            var objCel = objRow.insertCell(5);
            objCel.innerHTML = "<a href='javascript:void(0)' οnclick='javascript:del();'>删除</a>";

            //            objRow.attachEvent("onclick", getIndex);
            objRow.style.background = "pink";
        }
        function del() {
            inRowIndex = event.srcElement.parentNode.parentNode.rowIndex;
            Binddata.deleteRow(inRowIndex);
        }
        //        function getIndex() {
        //            intRowIndex = event.srcElement.parentNode.parentNode.rowIndex;
        //            alert("getIndex:" + intRowIndex);
        //            pos.innerText = intRowIndex;
        //            return intRowIndex;
        //        }


    </script>
</head>
<body>
    <div id="getTable" οnlοad="pos.innerText=intRowIndex;">
        <table>
            <!--<tr>
                <td colspan="6">
                    当前位置：<span id="pos"></span>
                </td>
            </tr>-->
            <tr>
                <td colspan="6">
                    <table width="100%" id="Binddata">
                        <thead id="thead">
                            <tr>
                                <th>
                                    ID
                                </th>
                                <th>
                                    配件名称
                                </th>
                                <th>
                                    使用数量
                                </th>
                                <th>
                                    价格
                                </th>
                                <th>
                                    单位
                                </th>
                                <th>
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                            <%=BindTable()%>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center">
                    配件名称:<input type="text" id="myCell1" name="myCell1" value="CGI" />
                </td>
                <td align="center">
                    使用数量：<input type="text" id="myCell2" name="myCell2" value="CGI" />
                </td>
                <td align="center">
                    价格：<input type="text" id="myCell3" name="myCell3" value="CGI" />
                </td>
                <td align="center">
                    单位：<input type="text" id="myCell4" name="myCell4" value="CGI" />
                </td>
                <td colspan="2" align="center">
                    <input type="button" name="Submit" value="添加" οnclick="insertRow(Binddata.rows.length)" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

 
a313976010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的js添加删除行
02-23
本例实现自动添加删除行的功能，功能简单了点，但是很好用希望对大家帮助
js动态添加行和删除行
08-24
js动态添加行和删除行
html中js增加删除行
流年似水
05-01 617
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 添加删除行 附件数量 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT="">
用js增加行，删除行
miao_hong_bin的专栏
01-23 2222
/////////////////////////////////HTMLで、以下の変数へ値を格納する必要がある。//items　　　挿入項目内容[Array]//////////////////////////////function addrow(s,TableId,cols,headline_num){ var table_i=0; var datalength=""; table_
PHP中实现接收多个name相同但Value不相同表单数据
php菜鸟技术天地
08-30 2014
改成 a[]" /> 接收代码： $s1=$_POST['s1']; $s1=implode(",",$s1); $t1 = explode(',',$s1); 实例： index.hmtl代码  利用jquery给指定的table添加一行、删除一行 ////////添加一行、删除一行封装方法//
js添加删除行和双击变文本框的脚本
10-30
发现我JS真的还有很多要学，下面只是我的练习作品，代码很多是网上的。
js动态添加 删除行
12-21
js动态添加 删除行
js简单的表格添加行和删除行操作示例
10-26
主要介绍了js简单的表格添加行和删除行操作,需要的朋友可以参考下
Js实现动态添加删除Table行示例
10-26
主要介绍了Js动态添加删除Table行的具体实现,需要的朋友可以参考下
用javascript删除当前行,添加行(示例代码)
10-26
主要介绍了用javascript删除当前行,添加行的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
javascript表格动态添加行,添加列,js,table,tr,td
weixin_33991418的博客
05-05 267
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;META NAME="Generator" CONTENT="EditPlus"&a
JavaScript为table动态添加、删除行（六）
xiaouncle的博客
04-05 3931
我一共写了三种方法来实现添加行的功能，写了一种方法来实现删除行的功能，主要感觉是一定要熟悉JavaScript的API，其实这些东西API文档里面都有，就看你是否知道JavaScript中有这个函数或属性，然后把这些属性和函数整合起来就是你想要的东西。 所有HTML元素都能用的常用函数：node.appendChild(node)、 所有HTML元素都能用的常用属性：element.tagNa...
js动态生成表格（添加删除行操作）
CSDNhaoheng的博客
04-01 608
HTML tbody标签为空 <table class="mt"> <thead> <tr> <td>标题</td> <td>标题</td> <td>标题</td> <td>标题</td>
JS 添加行删除行附带样式
u014157656的专栏
10-23 201
  最近在做一个table的动态添加删除行，可以带有当前行的样式，记录一下。 其中el是在html标签中 onclick="doAddRow(this)" function doAddRow(el){ el = getParent(el, 'TR'); //TR 是table中的tr，不知道是否区分大小写，有知道的可以说一下哈，没测试过。 var rowIndex = el.rowIn...
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
han_han__的博客
09-11 2637
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
JS-Table动态增加删除行
热门推荐
在路上
04-19 1万+
JS代码块<script> function add(){ //获取元素的值 var name = document.getElementById("name").value; var tel = document.getElementById("tel").value;
JS动态添加和删除行
littlecolor
04-26 1264
实现页面动态添加和删除行效果如下： 主要实现包括页面和js部分 页面HTML 主要通过table来实现，html先写好模版。 &lt;table id="ruleTable"&gt; &lt;tr&gt; &lt;td&gt; ...
js动态增加行 删除行
03-17 5801
//动态增加行 function addRow(tab){ var title = ""; var table = document.getElementById(tab); var newRow = table.insertRow();// var newCell = newRow.insertCell(); if(tab=="projectTab"){ title = $("#p
使用js实现简单地对表格添加行和删除行
sleeping_xixi的博客
05-13 9168
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; new document &lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gbk"/&gt; &lt;scrip
js动态添加删除表格行
最新发布
06-10
删除行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 删除最后一行 table.deleteRow(-1); ``` 注意，这只是一个简单的示例，实际应用中需要根据具体需求进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值