js 克隆行、删除行

最新推荐文章于 2023-05-28 22:50:59 发布
原创 最新推荐文章于 2023-05-28 22:50:59 发布 · 1.4w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。


                                  js 克隆行、删除行



前言

现在项目中，由于本人负责的模块为：“资源目录” ，功能清单如下，而此篇文章的功能描述在于“在线编目”里面实现中。业务和整体的实现逻辑就不多说了，挺多的！这里只是围绕具体的增加、删除行剖析即可。


--------功能列表--------

资源目录管理

资源目录管理-在线编目

资源目录管理-资源审核

资源目录管理-资源目录检索


资源目录共享

资源目录共享-资源申请

资源目录共享-资源审核

资源目录共享-资源获取


功能实现


实现的jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<base target="_self">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/common/meta.jsp"/>
<link href="${ctx}/skins/blue/css/sjsjzx.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx }/tiles/scripts/jquery-1.8.0.min.js"></script> 
<!-- 表单验证组件 --> 
 <script type="text/javascript" src="${ctx}/tiles/Validform/js/Validform_v5.3.2.js"></script>
 <link rel="stylesheet" type="text/css" href="${ctx}/tiles/Validform/css/style.css"/>
<title>在线编目</title>
<style type="text/css">
.button{
	position: relative; 
    overflow: visible; 
    display: inline-block; 
    padding: 0.5em 1em; 
    border: 1px solid #6495ED; 
    margin: 0;
    width:120px;
    text-decoration: none; 
    text-shadow: 1px 1px 0 #fff; 
    font-family:"Microsoft YaHei", "微软雅黑", "宋体", Arial, Helvetica, sans-serif;
	font-size: 16px;
    color: #333; 
    font-weight:bold;
    white-space: nowrap; 
    cursor: pointer; 
    outline: none; 
    background-color: #fff;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    -o-background-clip: padding-box; 
    /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
    -webkit-border-radius: 0.2em; 
    -moz-border-radius: 0.2em; 
    border-radius: 0.2em; 
    /* IE hacks */
    zoom: 1; 
    *display: inline; 
}
.dfinput{width:345px; height:25px; line-height:25px; border-top:solid 1px #a7b5bc; border-left:solid 1px #a7b5bc; border-right:solid 1px #ced9df; border-bottom:solid 1px #ced9df; background:url(../images/inputbg.gif) repeat-x; text-indent:10px;}
</style>
<script type="text/javascript">
function dosubmit(){
	if($('#resourceName').val()==''){
		alert("请输入资源目录名称！");
		return; 
	}
	if($('#infoSysName').val()==''){
		alert("请输入信息系统名称！");
		return;
	}
	if($('#sysAbstract').val()==''){
		alert("请输入信息系统简介！");
		return;
	}
	if($('#provideDepartment').val()==''){
		alert("请输入提供科室！");
		return;
	}
	if($('#keyWord').val()==''){
		alert("请输入检索关键字！");
		return;
	}
	if($('#busLinkman').val()==''){
		alert("请输入业务联系人姓名！");
		return;
	}
	if($('#busLinkmanPhone').val()==''){
		alert("请输入业务联系人电话！");
		return;
	}
	if($('#jointLinkman').val()==''){
		alert("请输入对接联系人姓名！");
		return;
	}
	if($('#jointLinkmanPhone').val()==''){
		alert("请输入对接联系人电话！");
		return;
	}
	if($('#jointType').val()==''){
		alert("请输入对接方式！");
		return;
	}
	if($('#shareProperty').val()==''){
		alert("请选择共享属性！");
		return;
	}
	if($('#openProperty').val()==''){
		alert("请选择公开属性！");
		return;
	}
	if($('#updateRate').val()==''){
		alert("请输入更新频度！");
		return;
	}
	if($('#resourceType').val()==''){
		alert("请选择资源类型！");
		return;
	}
	//校验资源项信息
	$('#resourceList').find("input").each(function(){
		var thisId = $(this).attr("id");
		alert(thisId.val());
		if(thisId.val() == ""){
			alert("资源项属性不能为空！");
			return;
		}
	});
	
	if(confirm("确定要保存吗？")){
			$("#mainForm").submit();
	}
}
</script>
</head>
<body>
<p style="text-align:center;font-size:20px;padding-bottom: 15px;padding-top: 10px;"><b>在线编目</b></p>
<form id="mainForm" name="mainForm" action="${ctx }/zymlgl/saveBm" method="post" >
<input type="hidden" id="" name="resources.resourceId" value="${obj.resources.resourceId}">
<input type="hidden" id="" name="dept" value="${obj.dept}">
<table width="90%" class="table_multilist" align="center">
	<tr>
		<td width="15%" class="label_1">资源目录名称</td>
		<td width="85%" colspan="6" class="label_2">
		 <input type="text" class="dfinput" style="width:98%" id="resourceName" name="resources.resourceName" value="${obj.resources.resourceName}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
		</td >
	</tr>
	<tr>
		<td width="15%" class="label_1">摘要</td>
		<td width="85%" colspan="6" class="label_2">
		 <input type="text" class="dfinput" style="width:98%" id="abstractWord" name="resources.abstractWord" value="${obj.resources.abstractWord}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
		</td >
	</tr>
	<tr>
		<td width="15%" class="label_1">信息系统名称</td>
		<td width="85%" colspan="6" class="label_2">
		 <input type="text" class="dfinput" style="width:98%" id="infoSysName" name="resources.infoSysName" value="${obj.resources.infoSysName}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
		</td >
	</tr>
	<tr>
		<td width="15%" class="label_1">系统简介</td>
		<td width="85%" colspan="6" class="label_2">
		 <input type="text" class="dfinput" style="width:98%" id="sysAbstract" name="resources.sysAbstract" value="${obj.resources.sysAbstract}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
		</td >
	</tr>
	<tr>
		<td width="15%" class="label_1">信息系统链接</td>
		<td width="85%" colspan="6" class="label_2">
		 <input type="text" class="dfinput" style="width:98%" id="sysUrl" name="resources.sysUrl" value="${obj.resources.sysUrl}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
		</td >
	</tr>
	<tr>
		<td width="15%" class="label_1">检索关键字</td>
		<td width="85%" colspan="6" class="label_2">
		 <input type="text" class="dfinput" style="width:98%" id="keyWord" name="resources.keyWord" value="${obj.resources.keyWord}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
		</td >
	</tr>
	<tr>
		<td width="15%" class="label_1">提供科室</td>
		<td width="85%" colspan="6" class="label_2">
		 <input type="text" class="dfinput" style="width:98%" id="keyWord" name="resources.provideDepartment" value="${obj.resources.provideDepartment}" datatype="*1-200" nullmsg="请输入url！" errormsg="请输入少于200个汉字！"/>
		</td>
	</tr>
	<tr>
		<td class="label_1">业务联系人</td>
		<td width="35%" class="label_2" colspan="2">
		 <input type="text" class="dfinput" style="width:95%" id="busLinkman" name="resources.busLinkman" value="${obj.resources.busLinkman}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
		</td>
		<td width="15%" class="label_1">联系电话</td>
		<td width="35%" class="label_2" colspan="3">
		 <input type="text" class="dfinput" style="width:95%" id="busLinkmanPhone" name="resources.busLinkmanPhone" value="${obj.resources.busLinkmanPhone}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
		</td>		
	</tr>
	<tr>
		<td class="label_1">对接联系人</td>
		<td width="35%" class="label_2" colspan="2">
		 <input type="text" class="dfinput" style="width:95%" id="jointLinkman" name="resources.jointLinkman" value="${obj.resources.jointLinkman}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
		</td>
		<td width="15%" class="label_1">联系电话</td>
		<td width="35%" class="label_2" colspan="3">
		 <input type="text" class="dfinput" style="width:95%" id="jointLinkmanPhone" name="resources.jointLinkmanPhone" value="${obj.resources.jointLinkmanPhone}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于50个汉字！"/>
		</td>
	</tr>
	<tr>
		<td class="label_1">对接方式</td>
		<td width="35%" class="label_2" colspan="2">
		 <wd:select name="resources.jointType" id="jointType" dicCode="1064" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.jointType}"/>
		</td>
		<td width="15%" class="label_1">资源更新频度</td>
		<td width="35%" class="label_2" colspan="3">
		 <wd:select name="resources.updateRate" id="updateRate" dicCode="1063" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.updateRate}"/>
		</td>
	</tr>
	<tr>
		<td class="label_1">资源共享属性</td>
		<td width="35%" class="label_2" colspan="2">
		 <wd:select name="resources.shareProperty" id="shareProperty" dicCode="1056" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.shareProperty}"/>
		</td>
		<td width="15%" class="label_1">资源公开属性</td>
		<td width="35%" class="label_2" colspan="3">
		 <wd:select name="resources.openProperty" id="openProperty" dicCode="1057" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.openProperty}"/>
		</td>
	</tr>
	<tr>
		<td class="label_1">所属资源类型</td>
		<td width="35%" class="label_2" colspan="2">
		 <wd:select name="resources.resourceType" id="resourceType" dicCode="1054" initValue="---请选择---" className="selectInput" style="width:175px;height:25px;" defaultValue="${obj.resources.resourceType}"/>
		</td>
		<td width="15%" class="label_1">数据库表名</td>
		<td width="35%" class="label_2" colspan="3">
		 <input type="text" class="dfinput" style="width:95%" id="tableName" name="resources.tableName" value="${obj.resources.tableName}" datatype="*1-50" nullmsg="请输入返回参数！" errormsg="请输入少于20个字符！"/>
		</td>
	</tr>
</table><br>
<!-- 资源项 -->
<table width="90%" class="table_multilist" align="center" id="maintable">
	<tr>
		<td class="label_1" width="12%" style="text-align: center;">资源项名称</td>
		<td class="label_1" width="12%" style="text-align: center;">数据库字段名</td>
		<td class="label_1" width="10%" style="text-align: center;">数据类型</td>
		<td class="label_1" width="15%" style="text-align: center;">备注</td>
		<td class="label_1" width="10%" style="text-align: center;">共享属性</td>
		<td class="label_1" width="15%" style="text-align: center;">不予共享理由</td>
		<td class="label_1" width="10%" style="text-align: center;">公开属性</td>
		<td class="label_1" width="15%" style="text-align: center;">不予公开理由</td>
		<td class="label_1" width="5%" align="left"><input type="button" value="+" onclick="addRow()"/></td>
	</tr>
	<!-- 克隆模板 -->
	<tr id="branchTr" style="display:none;">
			<td class="label_2" width="12%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="dataItemName_0" name="resourceDetailList[0].dataItemName" value="${resource.dataItemName}"/>
			</td>
			<td class="label_2" width="12%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="fieldCode_0" name="resourceDetailList[0].fieldCode" value="${resource.fieldCode}"/>
			</td>
			<td class="label_2" width="10%" style="text-align: center;">
				<wd:select name="resourceDetailList[0].dataItemType" id="dataItemType_0" dicCode="1055" initValue="--请选择--" className="selectInput" style="width:98%" defaultValue="${resource.dataItemType}"/>
			</td>
			<td class="label_2" width="15%" style="text-align: center;"><input type="text" class="dfinput" style="width:90%" id="memo" name="resourceDetailList[0].memo" value="${resource.memo}"/></td>
			<td class="label_2" width="12%" style="text-align: center;">
				<wd:select name="resourceDetailList[0].shareProperty" id="shareProperty_0" dicCode="1056" initValue="--请选择--" className="selectInput" style="width:98%" defaultValue="${resource.shareProperty}"/>
			</td>
			<td class="label_2" width="15%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="noShareReason_0" name="resourceDetailList[0].noShareReason" value="${resource.noShareReason}"/>
			</td>
			<td class="label_2" width="12%" style="text-align: center;">
				<wd:select name="resourceDetailList[0].openProperty" id="openProperty_0" dicCode="1057" initValue="--请选择--" className="selectInput" style="width:98%" defaultValue="${resource.openProperty}"/>
			</td>
			<td class="label_2" width="15%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="noOpenReason_0" name="resourceDetailList[0].noOpenReason" value="${resource.noOpenReason}"/>
			</td>
			<td class="label_2" width="5%" style="text-align: center;"><input type="button" value="删除" onclick="deleteRow(this)"/></td>
		</tr>
	<c:forEach items="${obj.resourceDetailList}" var="resource" varStatus="row">
		<tr>
			<td class="label_2" width="12%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="dataItemName_0" name="resourceDetailList[${row.index+1}].dataItemName" value="${resource.dataItemName}"/>
			</td>
			<td class="label_2" width="12%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="fieldCode_0" name="resourceDetailList[${row.index+1}].fieldCode" value="${resource.fieldCode}"/>
			</td>
			<td class="label_2" width="10%" style="text-align: center;">
				<wd:select name="resourceDetailList[${row.index+1}].dataItemType" id="dataItemType_0" dicCode="1055" initValue="---请选择---" className="selectInput" style="width:98%" defaultValue="${resource.dataItemType}"/>
			</td>
			<td class="label_2" width="15%" style="text-align: center;"><input type="text" class="dfinput" style="width:90%" id="memo_0" name="resourceDetailList[${row.index+1}].memo" value="${resource.memo}"/></td>
			<td class="label_2" width="12%" style="text-align: center;">
				<wd:select name="resourceDetailList[${row.index+1}].shareProperty" id="shareProperty_0" dicCode="1056" initValue="---请选择---" className="selectInput" style="width:98%" defaultValue="${resource.shareProperty}"/>
			</td>
			<td class="label_2" width="15%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="noShareReason_0" name="resourceDetailList[${row.index+1}].noShareReason" value="${resource.noShareReason}"/>
			</td>
			<td class="label_2" width="12%" style="text-align: center;">
				<wd:select name="resourceDetailList[${row.index+1}].openProperty" id="openProperty_0" dicCode="1057" initValue="---请选择---" className="selectInput" style="width:98%" defaultValue="${resource.openProperty}"/>
			</td>
			<td class="label_2" width="15%" style="text-align: center;">
				<input type="text" class="dfinput" style="width:90%" id="noOpenReason_0" name="resourceDetailList[${row.index+1}].noOpenReason" value="${resource.noOpenReason}"/>
			</td>
			<td class="label_2" width="5%" style="text-align: center;">
				<input type="hidden" name="resourceDetailList[${row.index+1}].detailsId" value="${resource.detailsId}"/>
				<input type="button" value="删除" onclick="deleteRow(this)"/>
			</td>
		</tr>
	</c:forEach>
</table>


<div style="text-align: center;margin-top: 20px;padding-bottom: 10px">
		<input type="button" id="button"  class="button" value="保存修改" onclick="dosubmit();" /> 
</div>
</form>

<script>
var index = ${fn:length(obj.resourceDetailList)};
function addRow(obj) {
	index++;
	var listName = "resourceDetailList[0]";
	var cloneTr = $("#branchTr").clone();
	$(cloneTr).show();
	$(cloneTr).attr("id",$("#branchTr").attr("id")+"_"+index);
	$(cloneTr).find("input").each(function(){
		var thisName = $(this).attr("name");
		var thisId = $(this).attr("id");
		if(thisName){
			if(thisName.indexOf(listName) != -1){
				$(this).attr("name",thisName.replace(listName,"resourceDetailList["+ index + "]"));
			}
		}
		if(thisId){
			$(this).attr("id",thisId.replace("_0","_"+index));
		}
	});
	$(cloneTr).find("select").each(function(){
		var thisName = $(this).attr("name");
		var thisId = $(this).attr("id");
		if(thisName){
			if(thisName.indexOf(listName) != -1){
				$(this).attr("name",thisName.replace(listName,"resourceDetailList["+ index + "]"));
			}
		}
		if(thisId){
			$(this).attr("id",thisId.replace("_0","_"+index));
		}
	});
	$(cloneTr).appendTo($("#maintable"));	
	
	}
    function deleteRow(obj) {
		if(confirm("确定删除吗？")){
			$(obj).parent().parent().remove();
		}
	}
	
</script>
</body>
</html>



增加行采用克隆方式，在后台接收值的方法如下： 


public View saveBm(@Param("::resources") Resource resources, @Param("::resourceDetailList") List<ResourceDetails> resourceDetailList,String dept, HttpServletRequest request)


此接收方式的写法看着不一样吧，用惯了SSH或SSM框架感觉不一样，这里用的是Nutz框架；如果是SSH或SSM框架，接收时写个List<ResourceDetails>，然后get()，set()就可以了。


增加行、删除行效果如下：




编辑同样效果如下：






JS实现一键复制、选中复制、选中多行复制
见贤思齐焉，见不贤内自省
02-05 2168
JS实现一键复制、选中复制、选中多行复制
jstable添加行删除行复制行
02-28
用js实现对table添加行、删除行、复制行的操作。
js 克隆行示例
qinzhijun的博客
12-07 188
&lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt; &lt;%@ taglib uri="/struts-tags" prefix="s" %&
jquery clone方法实现动态增加行和删除行
xhmaomy的博客
02-16 411
  //待克隆的div &lt;div class="serviceList-sel-body"&gt; &lt;div id="serviceId0" name="divName" &gt; &lt;select id="service_select_id" name="serviceId" class="serviceSel
20 行 JS 代码，实现复制到剪贴板功能
liNewman的博客
08-01 402
20 行 JS 代码，实现复制到剪贴板功能 转自：20 行 JS 代码，实现复制到剪贴板功能 HTML &lt;div class="rui-upload-btn rui-btng" data-copytarget="#rui-base64-result" id="copy-text-bt...
JS实现文字换行复制
代码存储室
02-10 1117
JS实现文字换行复制
js克隆对象、数组的常用方法介绍
10-26
在前端开发中，处理JavaScript对象和数组的克隆是一个常见的需求。克隆对象或数组可以让我们对它们进行操作，而不影响原始数据。本文将介绍几种在JavaScript中常用的对象和数组克隆方法，并讨论在涉及iframe父子窗口...
htmljs克隆标签
05-24
5. **表单处理**：在多行输入或自定义表单中，允许用户添加更多输入行，可以克隆现有的行元素。 然而，需要注意的是，克隆元素会复制所有属性，包括事件监听器。这可能导致不必要的性能消耗或逻辑错误，因此在实际...
JS对象深度克隆实例分析
10-20
JavaScript中的对象深度克隆是一种创建新对象的过程，这个新对象完全复制了原始对象的所有属性，包括嵌套的对象和数组，而不会与原始对象共享引用。这意味着对克隆对象的任何修改都不会影响原始对象。在JavaScript中...
JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf
11-13
JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中，DOM（Document Object Model）是指文档对象模型，它是 HTML 和 XML 文档的编程接口。通过 DOM，我们可以动态地操作文档的结构、样式和...
js中复制和删除一行的操作
卡基斯专栏
06-07 1582
var validateForm = null;   var num = 2;   $(document).ready(function(){       var lastCommunAddTr = $("#workDay");       $("#add").click(function() {    　　　　　    //复制一行                var tr
js实现复制，删除一行div或一行table
给我一个自由的空间
07-08 6926
转：http://hi.baidu.com/lmydream0417/blog/item/1d7523393f1b3628b8998fd2.html2010-05-26 15:28<br />在网上看到一段通过对节点的控制增加或删除一行table的代码如下：<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
JS实现增加/复制/删除行
chelen_jak的专栏
03-15 1309
转自：http://www.2cto.com/kf/201012/79792.html var customerInfoMethod ={  //复制增加行   copyrow:function(obj,id)  {   var rowIndex=obj.parentNode.parentNode.rowIndex;   var resrow=document.getEleme
使用js节点的克隆实现页面内容的增删
weixin_46936691的博客
04-25 215
小练习：使用节点克隆完成任务
JS 深度克隆的实现方法
UserGuan的博客
05-28 3653
如果这个对象里面含有 Map 之类的这些玩意，克隆之后这个 mapList 就不再是一个 Map 结构了。console.log("克隆后的对象", deepClone(obj));console.log("克隆后的对象", deepClone(obj));// 环形引用 obj.c 等于 obj 本身。或者是这个对象里面有一些函数之类的，克隆之后这个函数后都没有了。console.log("原对象", obj);console.log("原对象", obj);
js对象克隆的几种方法
爱的叹息的专栏
11-23 6458
在js中对象克隆就是把对象值重新赋给一个新对象。克隆也存在深克隆于浅克隆的区别。引用类型的值都会被保存在堆内存中，在栈内存中会存在一个指针指向堆内存中的值。这时，如果只复制了指针，则可以说这个克隆为浅克隆，如果时根据指针找到具体的值，复制值，就可以称之为深克隆。
js中，深克隆、浅克隆的概念，以及手写一个深克隆函数
qq_68155756的博客
05-10 445
在 JavaScript 中，浅克隆可以使用 Object.assign() 或展开符（…）来实现。深克隆通常使用递归函数 或 第三方库（如 Lodash 或 jQuery）来实现，某些情况下使用JSON.parse(JSON.stringify(obj))也能实现，之所以说某些情况下是因为使用此方式的时候，如果对象包含函数、日期、正则表达式等属性 会将这些属性转换为 null。
JavaScript 中对象的多种克隆方式以及注意事项
不知名人士的博客
03-30 1566
JS 对象克隆
Kettle中Clone row组件的使用
AnameJL的博客
10-24 584
“Clone row”组件使用起来比较简单，根据具体需求对原数据的每一行进行克隆，可以选择克隆一行或多行。 将算子“Clone row”拖拽到转换页面中，如图 1-1所示，原始文件中数据如图 1-2 图1-1 图1-2 双击“Clone row”，配置参数，如下图所示 查看结果数据，如下图所示 上图结果数据中，红框中的数据为原数据，绿色框中的数据为克隆的数据，可以看到是和配置参数相符的。 ...
掌握JavaScript实现表格行的增删改操作
下面详细介绍使用JavaScript实现表格中添加行、删除行和复制行的相关知识点。 1. **添加行** 向现有的HTML表格中添加一行是常见的需求。我们可以使用JavaScript来实现这一点。 - 获取表格元素：通常使用`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值