html动态追加行列

最新推荐文章于 2024-07-25 09:00:00 发布
最新推荐文章于 2024-07-25 09:00:00 发布
阅读量606 收藏
点赞数
文章标签： javascript jquery html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40568205/article/details/113770231
版权
本文介绍如何使用JavaScript和jQuery在HTML中动态添加行和列。通过示例代码展示如何操作DOM，实现动态创建交互式的HTML表格。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

废话不多说走起

<tr>
						<td colspan="4"  style="padding: 0px;">
							<table id="tctjTable" class="table_type_A hbBuildSuperviseBody" style="margin: 0px;">
								<thead>
								<tr>
									<td style="width: 11%">
										<span class="addRow" onclick="addRow(this,true,9,'bztBody',true)"> ⊕ </span>序号</td>
									<td style="width: 11%">合同工程量清单项目编号</td>
									<td style="width: 11%">分包工作名称</td>
									<td style="width: 11%">单位</td>
									<td style="width: 11%">合同工程量</td>
									<td style="width: 11%">合同单价（元）</td>
									<td style="width: 11%">合同金额（元）</td>
									<td style="width: 11%">分包工作金额（元）</td>
									<td style="width: 11%">分包工作金额占签约合同价的比例（%）</td>
								</tr>
								</thead>
								<tbody id="bztBody"></tbody>
							</table>
						</td>
					</tr>
 <jsp:include page="BuildSuperviseBody.jsp"></jsp:include>
<script>
	require([ "ckeditor/ckeditor","laydate"], function() {});
	$(function () {
		window.getDataInitialization(9,"bztBody",true);
	});
	function huizongData(){
		//获得表单信息
		var bztBody = window.getTableDataId("bztBody");
		var total1 = window.getDataToJson(bztBody);//table_1
		var dateAllTable = [total1];
		$("#BuildSuperviseBodyJson").val(JSON.stringify(dateAllTable));
	}
</script>
<%@ page language="java" pageEncoding="UTF-8" isELIgnored="false"%>
<style>
    /*动态增加样式*/
    .addRow{position: absolute;left: -20px;bottom: -8px;font-weight: bolder;cursor: pointer;font-size: 20px;color:gray}
    .deleteRow{position: absolute;left: -20px; bottom: 17px;;font-weight: bolder;cursor: pointer;font-size: 15px;color: gray;}
</style>
<%
    String root = request.getContextPath();
%>
<script type="text/javascript">
    // var column; /*tr 1-n*/
    var idTable;/*id*/
    var dynamic; /*number true false*/
    var jADD=1;

    function imgAdd(){
        $(".addRow").html("<img src='<%=root%>/hb/buildSupervise/hebeiSpecialWorkflow/addTableTr/jia.png'/>")
        $(".deleteRow").html("<img src='<%=root%>/hb/buildSupervise/hebeiSpecialWorkflow/addTableTr/jian.png'/>")
    }
    window.getDataInitialization = function (columns,idTables,dynamics,dataTypeTheads){
        // column=columns;
        idTable=idTables;
        dynamic=dynamics;
        this.addRow(undefined,true,columns,idTables,dynamics,dataTypeTheads)
        imgAdd()
    }
    function addRow(dom,isOne,columns,idTables,dynamics,dataTypeTheads) {
        var myMap = new Map()
        if (dataTypeTheads!=undefined){
            var splits = dataTypeTheads.split(";")
            for(var str in splits){
                var nub = splits[str].split(",")
                myMap.set(nub[0],nub[1])
            }
        }
        if (dataTypeTheads!=undefined){
            dataTypeTheads="'"+dataTypeTheads+"'"
        }
        var html=new Array();
        html.push("<tr>");
        var columnsFor = columns;
        var numberCol = 0;
        if (col(myMap.get("1"))!="false"){
            numberCol=parseInt(col(myMap.get("1"))[1]);
            html.push("<td colspan='"+numberCol+"'>");
            columnsFor = columns-(numberCol-1);

        }else {
            html.push("<td >");
        }
        for(var [key, value] of myMap){
            if (key!="1"){
                if(col(value)!="false"){
                    numberCol=parseInt(col(value)[1]);
                    columnsFor = columnsFor-(numberCol-1);
                }
            }
        }

        dynamic=dynamics;
        html.push("<input type='text' hidden/>");
        if(dynamic){
            html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',true,"+dataTypeTheads+")\"></span>");
            html.push("<span></span>");

            html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',true,"+dataTypeTheads+")\">  </span>");
        }else {
            if (myMap.get("1")!=undefined){
                // add one date
                if (myMap.get("1")=="date"){
                    html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                    html.push("<input type='text' class='classLaydate' onClick=\"laydate()\" readonly/>");
                    html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                }else if (myMap.get("1")=="person"){
                    html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                    html.push("<input type='hidden' id='deptFzrId"+jADD+"' />");
                    html.push("<input id='deptFzrName"+jADD+"' type='text' selector='true' singleselect='true' hidField='deptFzrId"+jADD+"' selector_icon='people01_icon' onClick=\"spf_selector(this,'person')\" />");
                    html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                }else if (col(myMap.get("1"))!="false"){
                    if (col(myMap.get("1"))[2]=="date"){
                        html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                        html.push("<input type='text' class='classLaydate' onClick=\"laydate()\" readonly/>");
                        html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                    }else if (col(myMap.get("1"))[2]=="person"){
                        html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                        html.push("<input type='hidden' id='deptFzrId"+jADD+"' />");
                        html.push("<input id='deptFzrName"+jADD+"' type='text' selector='true' singleselect='true' hidField='deptFzrId"+jADD+"' selector_icon='people01_icon' onClick=\"spf_selector(this,'person')\" />");
                        html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                    }else {
                        html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                        html.push("<input type='text'/>");
                        html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                    }
                    html.push("</td>");
                }else {
                    html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                    html.push("<input type='text'/>");
                    html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                }
            }else {
                html.push("<span class=\"addRow\" onclick=\"addRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
                html.push("<input type='text'/>");
                html.push("<span class=\"deleteRow\" onclick=\"deleteRow(this,false,"+columns+",'"+idTables+"',false,"+dataTypeTheads+")\">  </span>");
            }
        }
        html.push("</td>");
        for (var i = 1; i < columnsFor; i++) {
            if (myMap.get(""+(i+1)+"")!=undefined){
                // add one date
                if (myMap.get(""+(i+1)+"")=="date"){
                    html.push("<td>");
                    html.push("<input type='text' class='classLaydate' onClick=\"laydate()\" readonly/>");
                    html.push("</td>");
                }else if (myMap.get(""+(i+1)+"")=="person"){
                    html.push("<td>");
                    html.push("<input type='hidden' id='deptFzrId"+jADD+i+"' />");
                    html.push("<input id='deptFzrName"+jADD+i+"' type='text' selector='true' singleselect='true' hidField='deptFzrId"+jADD+i+"' selector_icon='people01_icon' onClick=\"spf_selector(this,'person')\" />");
                    html.push("</td>");
                }else if (myMap.get(""+(i+1)+"")=="select1"){//新增安全管理
                    html.push("<td>");
                    html.push("<input type='hidden' class='nameInput' value=''/>");
                    html.push(" <select onchange='openValue(this)' class=\"spf_input_option\">\n" +
                        "<option value =\"未检查\">未检查</option>\n" +
                        "<option value =\"已检查\">已检查</option>\n" +
                        "<option value =\"未落实\">未落实</option>\n" +
                        "<option value =\"已落实\">已落实</option>\n" +
                        "</select>");
                    html.push("</td>");
                }else if (col(myMap.get(""+(i+1)+""))!="false"){
                    numberCol=parseInt(col(myMap.get(""+(i+1)+""))[1]);
                    html.push("<td colspan='"+numberCol+"'>")
                    if (col(myMap.get(""+(i+1)+""))[2]=="date"){
                        html.push("<input type='text' class='classLaydate' onClick=\"laydate()\" readonly/>");
                    }else if (col(myMap.get(""+(i+1)+""))[2]=="person"){
                        html.push("<input type='hidden' id='deptFzrId"+jADD+i+"' />");
                        html.push("<input id='deptFzrName"+jADD+i+"' type='text' selector='true' singleselect='true' hidField='deptFzrId"+jADD+i+"' selector_icon='people01_icon' onClick=\"spf_selector(this,'person')\" />");
                    }else {
                        html.push("<input type='text'/>");
                    }
                    html.push("</td>");
                }else {
                    html.push("<td>");
                    html.push("<input type='text'/>");
                    html.push("</td>");
                }
            }else {
                html.push("<td>");
                html.push("<input type='text'/>");
                html.push("</td>");
            }

        }
        html.push("</tr>");
        idTable=idTables;
        if (isOne){
            if (idTables!=undefined){
                $("#"+idTables).append(html.join(""))
            }else {
                $("#"+idTable).append(html.join(""))
            }
        }else {
            $(dom).parent().parent().after(html.join(""));
        }
        if(dynamic){
            reflushNo();
        }
        jADD++;
        imgAdd()
        try {//调用回调函数
            if(typeof(window.saveAddRow(dom))=="function"){
            }
        }catch(e){
            //这是捕捉异常
        }
    }
    function col(Col) {
        if (Col!=undefined){
            var cop = Col.split("_")
            if(cop.length>=2){
                return cop;
            }else {
                return "false";
            }
        }else {
            return "false";
        }
    }
    function deleteRow(dom) {
        try {//调用回调函数
            if(typeof(window.saveDelRow(dom))=="function"){
            }
        }catch(e){
            //这是捕捉异常
        }
        $(dom).parent().parent().remove();
        if(dynamic){
            reflushNo();
        }
    }
    function deleteRow2(dom) {
        $(dom).remove();
        if(dynamic){
            reflushNo();
        }
    }
    function reflushNo() {
        $("#"+idTable+" tr").each(function (index) {
            $(this).children("td").eq(0).children("span").eq(1).html(index+1);
        })
    }
    function reflushNo2(idTable2) {
        $("#"+idTable2+" tr").each(function (index) {
            $(this).children("td").eq(0).children("span").eq(1).html(index+1);
        })
    }

    //jquery table data all
    window.getTableDataAll = function (){
        var milasUrl={};
        var subMilasUrlArr={};
        var tableData={};
        $("#tctjTable tbody tr").each(function(trindex,tritem){
            tableData[trindex]=new Array();
            $(tritem).find("input:Visible").each(function(index,value){
                tableData[trindex][index]=$(value).val();
                subMilasUrlArr[trindex]=tableData[trindex];
            });
        });
        for(var key in subMilasUrlArr){
            milasUrl[key]=subMilasUrlArr[key];
        }
        return milasUrl;
    }
    //jquery table data all by id
    window.getTableDataId = function (nameid){
        var milasUrl={};
        var subMilasUrlArr={};
        var tableData={};
        $("#"+nameid+" tr").each(function(trindex,tritem){
            tableData[trindex]=new Array();
            $(tritem).find("input:Visible").each(function(index,value){
                tableData[trindex][index]=$(value).val();
                subMilasUrlArr[trindex]=tableData[trindex];
            });
        });
        for(var key in subMilasUrlArr){
            milasUrl[key]=subMilasUrlArr[key];
        }
        return milasUrl;
    }
    //jquery table data all by id
    window.getTableDataIdNotHidde = function (nameid){
        var milasUrl={};
        var subMilasUrlArr={};
        var tableData={};
        $("#"+nameid+" tr").each(function(trindex,tritem){
            tableData[trindex]=new Array();
            $(tritem).find("input").each(function(index,value){
                tableData[trindex][index]=$(value).val();
                subMilasUrlArr[trindex]=tableData[trindex];
            });
        });
        for(var key in subMilasUrlArr){
            milasUrl[key]=subMilasUrlArr[key];
        }
        return milasUrl;
    }
    //data to all
    var number = 1;
    window.getDataToJson = function (arr){
        var count = 1;
        var Json = {};
        $.each(arr,function(name,value) {
            Json[count] = value;
            count++;
        });
        var table = "table_"+number;
        number++;
        var map = new Map();
        map.set(table,Json);
        return _mapToJson(map);
    }
    //map to json
    function _strMapToObj(strMap){
        let obj= Object.create(null);
        for (let[k,v] of strMap) {
            obj[k] = v;
        }
        return obj;
    }
    function _mapToJson(map){
        return JSON.stringify(this._strMapToObj(map));
    }
</script>

 

苏晓顺
关注
HTMl 添加
遗声落西秦
12-02 353
function tj() { var xj_tr = document.createElement("tr"); var shuju_name = document.getElementById("a_name"); var shuju_age = document.getElementById("a_age"); var shuju_buil = docume
bootstrap-table动态添加列、动态添加行、单元格点击横向、竖向统计
热门推荐
we675398040的博客
05-29 1万+
功能说明 一 、横竖向统计 1.竖向统计统计使用bootstrap-table自带的footerFormatter函数 2.横向同级统计使用bootstrap-table 列属性 formatter 3.单元格合并 4.点击单元格获取后台数据并展示 5.获取最终数据 代码部分 <!DOCTYPE html> <html lang="en"> <h...
Html动态添加行
04-14
这是一个简答的HTML的动态添加行代码示例,利用jquery编写!
往html内追加html
weixin_44541162的博客
06-18 3079
（作者：苦行者；撰写时间：2019年6月15日） 1、图中是一个下拉菜单，里面有一些子选项，而我接下来要实现的功能是：当我点击任意一个选项的时候，让它对应地显示到下面的导航栏（隐藏起来了）内。 Html结构如下： 我给dl标签下面的每一个dd标签都给它一个id，主要是为了后面给追加的div标签自动添加id，方便后期使用。 2、导航栏html结构如下，需要往里面追加html； 3、下拉菜单的点...
html form 行列,html表格和表单.ppt
weixin_33034651的博客
06-11 246
html表格和表单表单的结构 HTML页面 表单 表单子元素1 表单子元素2 表单子元素n 表单页面的基本结构 METHOD =“post或get” ACTION METHOD 指定提交后，由服务器上那个处理程序处理 指定向服务器提交的方法: 一般为post或get方法, post方法比较安全 ACTION = “URL” …… 演示示例1：使用 post提交方式 和 g...
html表格动态新增行
NJR10byh的博客
03-07 1764
<div> <table border="1" cellspacing="0" id="patent_table"> <tr> <th>专利名称</th> <th>发明人</th> <th>专利号</th> </tr> </table> .
avue 动态行列合并
最新发布
03-22
### Avue.js 中动态行列合并的实现 在 Avue.js 表格组件中，可以利用其内置的支持功能来实现动态行列合并的效果。以下是关于如何在 Avue.js 中实现动态行列合并的具体说明。 #### 列合并 Avue 提供了 `spanMethod`...
在Webwork框架中实现表格行列的动态增删技巧
为了实现动态增加表格的行列，我们需要了解Webwork的基础知识、HTML表格的基本操作以及JavaScript技术。 ### 知识点1：Webwork框架基础 Webwork框架允许开发者按照MVC模式组织代码，把业务逻辑、数据处理和界面...
js动态创建、删除表格示例代码
12-11
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串 方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。 运行时间比较: 方法 运行时间
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Demon丶冷漠
11-23 1975
        最近在做一个项目，由于列表比较长，产生了纵向滚动条，这个时候拖动导致一些重要的信息就会看不到，很不方便。这个时候如果能给这几列重要的信息固定住，只拖动后面的列就显得格外重要了，我在网上也看了很多的例子，都不是很符合，最后自己尝试出了方法。测试过兼容的浏览器有谷歌，火狐，IE11！其他的浏览器没做过测试，各位自己看吧！好了，话不多说，效果如下图所示：   直接看代码吧！需要注...
c#画表格，自动创建htmltable的行与列
03-12
进来在做c#动态生成table，c#自动创建htmltable的行与列
一个待办事项列表界面（可添加删除）
12-18
一个待办事项列表界面（可添加删除）
html 文本域设置行列,htmltextarea属性
weixin_42298971的博客
06-17 2015
一、表格的常用属性基本属性有：width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽，即表格与tr之间的间隔)、cellpadding(表格内元素的间隔，即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的背景图片...
HTML的html（）追加数据
公子七
09-18 3764
html:代码 <div id="contentDivHtml_${topic.ID }"class="contentDivHtmlClass"style="display:none;"> <span></span> </div>js:代码//显示以及表决的人的名字 function showVoterInDiv(topicId){ $(".contentD
jquery动态追加html数据,jQuery动态追加页面数据以及事件委托详解
weixin_39837207的博客
05-31 348
我们要执行的任务是页面起初有一部分图片，我们在底下有一个More Photos的链接，点击后，向当前页面后加载一部分图片，再点击该链接，继续加载，直到将我们列出的页面加载完成，此时该链接也消失了。首先效果图如下：这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有文字出现，鼠标移出时文字消失。我们现在要做的就是点击底下的MorePhotos链接时，再加载一部分数据，然后再点击在加载一部分数...
在页面中动态给table添加行,添加列
happy997731的专栏
12-03 1783
昨天需要做页面的动态添加表格的行、列，把自己代码贴出来，以免忘记 html: 总车程:
javascript 动态添加表格行
j2ee实战的点点滴滴
06-14 2562
动态添加表格行 文/Ray 表格部分代码如下：testTbl" border=1>tr1">box1">第一行tr2">box2">第二行box3">第三行动态添加表行的javascript函数如下：function addRow(){//添加一行var newTr = testTbl.insertRow(
前端必知必会-html表格行列样式
qq_24018193的博客
07-25 1181
本文介绍了的html列表的使用使用，如有问题欢迎私信和评论。
jquery动态追加html,jQuery中几种动态追加元素的方法
weixin_39608116的博客
05-31 1816
几乎所有网站的开发都离不开jQuery，jQuery可以很方便的实现网页中的一些效果，也很轻松的对网页中的一些DIV元素进行添加，修改或删除的操作。今天我们就说一说，如何对网页中某个指定的DIV进行元素的追加操作。JQuery中的append()方法append() 方法在被选元素的结尾(仍然在内部)插入指定内容。提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：...
HTML转JavaScript格式以提升追加操作效率
要将HTML转换成可以追加的JavaScript格式，首先需要理解HTML文档的结构以及JavaScript如何操作DOM（文档对象模型）。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而JavaScript是一种脚本语言，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值