JavaScript动态增加行

最新推荐文章于 2021-08-21 16:43:24 发布
最新推荐文章于 2021-08-21 16:43:24 发布
阅读量100 收藏
点赞数
文章标签： JavaScript CSS HTML ViewUI

<html> <link href="skin.css" mce_href="skin.css" rel=stylesheet type=text/css> <mce:script language="JavaScript"><!-- var num = 0;//记录已经添加的行数 function addRow() { var dataBox = document.getElementById("dataBox");//table var otr = dataBox.insertRow(dataBox.rows.length);//参数：table行数-1,在第几行后面增加行 var otd = otr.insertCell(); otd.style.border = "1 solid #000000"; otd.height = "18"; otd.style.bordercolor = "#000000"; var sHTML = "<input type=checkbox id=sel value= >"+num; otd.innerHTML = sHTML; for(i=0;i<6;i++){ var otd1 = otr.insertCell(); otd1.style.border = "1 solid #000000"; otd1.height = "18"; otd1.style.bordercolor = "#000000" var sHTML = i; otd1.innerHTML = sHTML; } num = num + 1 } //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> //delete a row function delrow() { var i = 0,otr; var dataBox = document.getElementById("databox"); for(i = num-1;i >= 0;i--){ if(sel[i].checked == true){ otr = dataBox.deleteRow(i+1);//删除除表头外的第一行 num = num - 1; } } } //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> //mouse on button function button_over() { var ob=event.srcElement; if (ob.tagName!="BUTTON") { return; } ob.className="btnMouseOver"; } //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> //mouse out button function button_out() { var ob=event.srcElement; if (ob.tagName!="BUTTON") { return; } ob.className="btnMouseOut"; } // --></mce:script> <table id="tblCommandBtn" class="tblCommandBtn" onMouseover="button_over()" onMouseout="button_out()"> <tr> <td> <button name="btnAddRow" οnclick="addRow()" class = "btnmouseout">增加行</button> </td> <td> <button name="btnDeleteRow" οnclick="delrow()" class = "btnmouseout">删除行</button> </td> </tr> </table> <table width="100%" id="dataBox" class="tblBillDetail" cellspacing="0" cellpadding="0" height="70" border="1"> <tr> <td width="5%" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center">　</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 商品号</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 商品名称</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 在库量</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 数量</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 计量单位</td> <td class="tdBillDetailTitle" style="border: 1 solid #000000" mce_style="border: 1 solid #000000" bordercolor="#000000" height="22" align="center"> 状态</td> </tr> <table> <button class = "redText">aaa</button> </html>

iteye_10359
关注
javascript实现动态添加删除表格行
04-13
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
利用javascript动态添加行(原创)
07-19
1. **DOM操作**：JavaScript动态添加行的核心是Document Object Model (DOM)。DOM是HTML和XML文档的结构化表示，通过它可以读取、修改和更新页面内容。使用DOM方法如`createElement()`, `appendChild()` 和 `...
JavaScript 动态增加行~
van416521的专栏
11-08 654
JS代码: window.onload = function() { var add = $('add'); var del = $('del'); var i=1; add.onclick = function() { var tableObject = new Object(); var isneed = true; tableObject = $('Clo
JavaScript 动态添加行
彻底拆分，一切可控！
06-12 786
动态添加行
javascript实现动态增加行删除行.
liuchao1211的专栏
11-11 712
"-//W3C//DTD HTML 4.0 Transitional//EN">    New Document   "javascript">    function addRow()    {        //增加一行         var tr = modifyTable.insertRow(modifyTable.rows.length); 
JavaScript 动态添加表格行 使用模板、标记
10-29
整体来看，文档提供了在客户端使用JavaScript动态添加表格行的详细方法和步骤，并通过实际代码片段和设计思路，向读者展示了如何在面对复杂表格数据操作需求时，通过模板和标记技术实现更高效和灵活的数据处理。...
javascript 动态添加表格行
12-08
表格部分代码如下： ”testTbl” border=1> ...”b”>第一行 ”tr2″> <td width=6%><input type=checkbox id=”box2″> ”b”>第二行 <td width=6%><input type=checkbox id=”box3″> 第三行</
asp+jsp+JavaScript动态实现添加数据行
10-23
总结来说，动态添加数据行的核心在于使用JavaScript在客户端进行操作，这提供了灵活的用户体验。同时，后台的ASP或ASP.NET负责数据的验证和持久化。理解这些概念和技术对于开发交互式、用户友好的Web应用至关重要。...
javascript动态添加表格数据行(ASP后台数据库保存例子)
10-29
- 使用`<input type="button">`按钮触发添加行的JavaScript函数； - 通过`<input type="submit">`提交整个表格中的数据到后端服务器； - 采用`<img>`标签配合`onclick`事件处理删除表格行的操作； - 使用`...
JS动态增加行
会飞De琥珀
03-24 566
$(document).ready(function () { //居中 $("#tab tr").attr("align", "center"); //增加 $("#but").click(function () { var _len = $("#tab tr").l
利用JS动态增加行
默默的小熊
09-07 133
&lt;%@ page language="java" import="java.util.*" pageEncoding="gb2312"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt;
纯JS table动态增加行
Everyone_boy的博客
08-21 8019
JS代码： function addRow(tableId) { var tb=document.getElementById(tableId); var tbRows=tb.rows; var newTr=tb.insertRow(tbRows.length); newTr.align="center"; var newTd0=newTr.insertCell(0); var newTd1=newTr.insertCell(1); var newTd2=newTr.insertCel
javascript 动态增加行列
wletv的专栏
05-10 1006
<br /><br />下面这段代码 我在IE、火狐、Chrome都测试通过<html><br /> <head><br />  <title> New Document </title><br />  <meta name="Generator" content="EditPlus"><br />  <meta name="Author" content=""><br />  <meta name="Keywords" content=""><br />  <meta name="Description"
简单的javascript动态增加删除行
baizhixin的专栏
01-24 225
var count = 1; function addRow() { if(count1){ var tab = document.getElementById("timeList"); var i=tab.childNodes.length; tab.deleteRow(i-1); count--; } }
javascript——动态增加删除行
sprita1的专栏
12-17 772
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>       ">          My JSP 'test.jsp' st
javascript动态增加删除行
zhangyaou的专栏
11-02 108
function add(){ var num = parseInt(document.getElementById("num").value)+1; document.getElementById("dyn").innerHTML += ("name"+num+""); document.getElementById("num").value...
js/jq动态创建表格的行与列
liudanyang_21的博客
08-27 733
之前做了一个项目，需求是能动态创建表格行，动态创建表格的列，度了很多资料，都没有动态创建列的插件，所以自己动手写了一个 需求大概是（下图） 1.动态添加一行、2.动态添加一列，3.删除行、4.删除列，5.复制行，6.表头的选项是可自定义写入，7.表格的数据可后台传入，也可写入，8.提交数据到后台 //html文件（首先写在html文件中写好表格结构代码，后面再把注释掉的html压缩写到js文件中进行插件的封装） <div class="creta-table"></div>
利用javascript动态添加表格行以及删除表格行
热门推荐
summerhmy的博客
09-29 2万+
首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。 如图： 对应的html代码： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;tit...
使用JavaScript动态添加表格行
这个示例展示了一个简单的JavaScript动态添加表格行的功能，适用于需要用户交互式输入数据的网页。开发者可以通过修改和扩展这个示例，实现更复杂的表格操作，如删除行、编辑单元格、验证输入等。同时，结合服务器端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值