精华内容
下载资源
问答
  • 文章目录如何使用js添加html标签 如何使用js添加html标签 其实很简单,只需要以下几个步骤: 1.使用getElementById获取想要写的标签的父标签对象(body除外,当然body也可以获取,当时没必要,因为他可以通过...

    如何使用js添加html标签

    其实很简单,只需要以下几个步骤:
    1.使用getElementById获取想要写的标签的父标签对象(body除外,当然body也可以获取,当时没必要,因为他可以通过document.body直接调用)
    2.使用createElement创建标签对象
    3.设置标签的属性和文本信息
    4.使用步骤1获取到的父标签对象的appendChild方法添加标签

    详细代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*所有li标签都适用*/
            li{
                color:orangered;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
            	//在body中添加标签
                //添加div元素(在内存中)
                let divObj = document.createElement('div');
                divObj.innerHTML = "我是js添加的文字";
                //把div添加到body作为他的子元素
                document.body.appendChild(divObj);
    
    			//在ul中添加标签
                //获取ul标签
                let uList = document.getElementById('uList');
                //添加li元素
                let liObj = document.createElement('li');
                //设置标签样式,当然也可以设置其他的属性值
                liObj.setAttribute('style','background:grey');
                //设置标签的文本信息
                liObj.innerText = 'Python';
                // 把js新建的li放到ul下
                uList.appendChild(liObj);
            }
        </script>
    </head>
    <body>
        <div>下面是几个常用的编程语言</div>
        <ul id="uList">
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
        </ul>
    </body>
    </html>
    

    显示:
    在这里插入图片描述

    展开全文
  • js动态添加HTML标签

    千次阅读 2017-12-01 11:09:40
    function addElement_imageText(img... li.onclick=function(){//给p标签添加onclick事件 Avatar.push(['track', ['click', 'detail', '', {tab:category_chn, id:newsid}, 0]]); window.open(url); }; }
    	function addElement_imageText(img,title,source,view_count,publish_time,url,article_type,newsid,category_chn){
    		/*var reconmendDiv =  document.getElementById("m-newList");
    		var reconmendDivWarp = document.createElement("div");
    		reconmendDivWarp.setAttribute("class", "wrap");
    		reconmendDiv.appendChild(reconmendDivWarp);
    		var ul = document.createElement("ul");
    		reconmendDivWarp.appendChild(ul);*/
    		
    		var ul = document.getElementById("newListul");
    		var li = document.createElement("li");
    		li.setAttribute("class", "fl image-text-li");
    		ul.appendChild(li);
    		var lidiv = document.createElement("div");
    		lidiv.setAttribute("class", "newsdetail");
    		li.appendChild(lidiv);
    		
    		var imgdiv = document.createElement("div");
    		imgdiv.setAttribute("class", "fl image-text-li");
    		var liimg = document.createElement("img");
    		liimg.src = img;
    		lidiv.appendChild(liimg);
    		
    		if(itypeItem==1||itypeItem==undefined){
    			var typediv = document.createElement("div");
    			if(category_chn==""||category_chn.length>3){
    				category_chn = "其他";
    			}
    			typediv.innerHTML = category_chn;
    			typediv.setAttribute("class", "typetext");
    			lidiv.appendChild(typediv);
    		}
    		var lip = document.createElement("p");
    		lip.innerHTML = title.substring(0,25);
    		lidiv.appendChild(lip);
    		var span1 = document.createElement("span");
    		span1.setAttribute("class", "firstspan");
    		span1.innerHTML = source.substring(0,5);
    		lidiv.appendChild(span1);
    		var span2 = document.createElement("span");
    		span2.innerHTML = view_count+"评论";
    		span2.setAttribute("class", "secendspan");
    		lidiv.appendChild(span2);
    		var span3 = document.createElement("span");
    		span3.setAttribute("class", "lastspan");
    		span3.innerHTML = publish_time;
    		lidiv.appendChild(span3);
    		
    		li.οnclick=function(){//给p标签添加onclick事件
    	    	Avatar.push(['track', ['click', 'detail', '', {tab:category_chn, id:newsid}, 0]]);
    	    	window.open(url);
    		};
    	}

    展开全文
  • 目录 情形:需求 实现:分析 实现 页面:前端 总结:仔细再仔细 ...需要实现动态增加页面,可以添加...最先开始决定用组建,先找的bootspript的表格,但是后来发现这个组建并不能满足我的需求,他无法添加可编辑名...

    目录

    情形:需求

    实现:分析 实现

    页面:前端

    总结:仔细再仔细


    情形:

    最近遇到这样一个情况:

    1. 需要实现动态增加页面,可以添加页面,页面的内容需要能保存,修改和删除。
    2. 页面的名字可编辑,并且要实现单击页面切换,双击编辑页面名字文本。

    最后结果就是这样:

    实现:

    最先开始决定用组建,先找的bootspript的表格,但是后来发现这个组建并不能满足我的需求,他无法添加可编辑名字的页面。随即放弃。再在后来决定使用js 拼接按钮的方式动态拼接html元素的方式实现页面添加。但是此方法需要注意3个点要处理好:

    1. 多个页面的数据存取都是用同一个数据库同一张表。
    2. js拼接的只能是button元素,因为需要绑定单双击事件,需要使用一个span标签和input标签来回切换。
    3. 各个拼接的button的id需要唯一,其中的span和input的id也要唯一

    js拼接html代码:需要从别的html粘一个按钮过来,或者自己写也行。注意" "和' '使用,让变量和常量区分开来,如果你定义的整体是" ",那么变量使用 "+变量+" 的方式拼接,常量用 '常量'的方式拼接。相反,你的整体使用 ' ' 单引号的话,变量就要使用'+要传值的量+'来拼接。另外,onchange事件传值最好使用this 把这个input元素都传值过去,然后用this.value  this.id 的方式获取 id 和内容。

    下面是页面添加按钮绑定的方法:我采用button + span+ input 的方式 来实现对 button的单双击切换

    function addMicroserviceConfPage(){             	
    	//新建的时候不需要查之前的配置名字
    	//rememberName='';
    	var spanId="span_"+Math.floor(Math.random()*100000000);
    	var inputId="input_"+Math.floor(Math.random()*100000000);
    	var addTab="<button  style='margin-left:10px;margin-bottom:10px;' class='btn btn-default btn-style indexBtn checked'>"+
    			   "<span  id="+spanId+"></span>"+
    	           "<input id="+inputId+" value='请为当前配置文件命名'  style='border:none;width: 153px;color: black;'  onchange='changeConfNames(this);' /></button>";
    	$("#buttonDivTab").append(addTab);
    }          

     

    因为需要各个元素的id唯一,因此需要两种情况:

    1.数据库里没数据,按钮点击生成新页签的时候:此时文件名不存在,为了区分新建多个按钮的保存以及切换,我决定使用随机数来为span 和input 附上唯一的id,(Math.flow的意思是 向上取整数舍去小数)。

    2、数据库有数据,打开页面就要显示数据,按钮的名字必须是唯一的,此时不用随机数了,使用配置文件名字来区分各个按钮对应哪个页面。js 拼接代码如下:

    function findConfNameByPid(Pid){
    	var confNames=[];
    	$.ajax({
    		  async : false,
    		  cache:false,
    		  dataType:'json',
    		  type : 'POST', 
    		  url : '<%=basePath%>/project/findConfNameByPid', 
    		  data :{'projectVersionResourceID':Pid},
    		  success: function(result){
    			  confNames = result;
    			  allNamesForOnly=result;
    			  var ids=result;
    			  if(confNames.length==0){
    				  $("#buttonDivTab").empty();
    				  var spanId="span_"+Math.floor(Math.random()*100000000);
    				  var inputId="span_"+Math.floor(Math.random()*100000000);
    				  var addTab="<button  style='margin-left:10px;margin-bottom:10px' class='btn btn-default btn-style indexBtn checked'>"+
    				  			 "<span id="+spanId+"></span>"+	
    			                 "<input id="+inputId+" value='请为当前配置文件命名'  style='border:none;width: 153px;color: black;' onchange='changeConfNames(this)' />"+
    			                 "</button>";
    				  $("#buttonDivTab").append(addTab);
    				  
    			  }else{
    				  $("#buttonDivTab").empty();
    			      for(var i=0;i<confNames.length;i++){
    					if(i==0){//第一个tab默认显示选中的样式
    						var idNames=ids[i].split(".");
    						var spanId="span_";
    						var inputId="input_";
    						if(idNames.length!=0){
    							for(var j=0;j<idNames.length;j++) {
    								spanId+=idNames[j];
    								inputId+=idNames[j];
    							}
    						}  
    						var addTab="<button  style='margin-left:10px;margin-bottom:10px' class='btn btn-default btn-style indexBtn checked'>"+
    						           "<span name='spName' id="+spanId+">"+confNames[i]+"</span>"+	
    							       "<input name='btnName' id="+inputId+" value="+confNames[i]+"  style='border:none;width: 153px;display:none;color: black;' onchange='changeConfNames(this)' /></button>";
    						$("#buttonDivTab").append(addTab);
    						
    					}else{
    					     //为 span 和input 赋值唯一的id
    						 var idNames=ids[i].split(".");
    						 var spanId="span_";
    						 var inputId="input_";
    						 if(idNames.length!=0){
    							for(var j=0;j<idNames.length;j++) {
    								spanId=spanId+idNames[j];
    								inputId=inputId+idNames[j];
    							}
    						 }  
    
    					    var addTab="<button  style='margin-left:10px;margin-bottom:10px' class='btn btn-default btn-style unchecked indexBtn'>"+
    					    		   "<span name='spName' id="+spanId+">"+confNames[i]+"</span>"+	
    							       "<input name='btnName' id="+inputId+" value="+confNames[i]+" style='border:none;width: 153px;display:none;' onchange='changeConfNames(this)' /></button>"; 
    					    $("#buttonDivTab").append(addTab);
    					 }
    				  }
    			  }
    			 
    				 
    		  }
    	 });
    
    	if(confNames.length!=0 && confNames !=null && confNames !=""){
    		confName=confNames[0]; //第一个文件名
    	}else{
    		confName='请为当前配置文件命名'; //没数据给默认值name
    	}  
    	 
    }

    对应的onchange事件处理如下:

    function changeConfNames(e){
    	var valueName=e.value;
    	var idName="#"+e.id;
    	confName=valueName;
    	if(allNamesForOnly!="" && valueName!=""){	
    		if(allNamesForOnly.indexOf(valueName)!=-1){
    			$(idName).val("");
    			alertMsg("当前配置文件名字已经存在","info");
    		}
    	}
    }

    其中的allNamesForOnly 是全局变量 ,在页面加载的时候会将数据库里的文件名加载过来,用来确认是否重复。

    (全局变量虽然方便,但是用完就要释放掉,不释放一般情况下不影响,但是一旦印象,那种经历你会一直记得,因为全局变量造成的bug不好复现,但是偶然的出现会让你摸不着头脑。)

    单双击切换实现的代码:

    //单击 切换页面   双击 编辑文本
    $(document).ready(function(){
    	   var timer = null;
       	   $("#buttonDivTab").on("click","button",function(){
               clearTimeout(timer);
               $(this).addClass("checked");
      		   $(this).siblings().removeClass("checked");
      		   $(this).siblings().addClass("unchecked");
               confName=$(this).find("input").val(); 
               
               timer = setTimeout(function() { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
     
    	   			var rightData;	
          			$.ajax({
          				  async : false,
          				  cache:false,
          				  dataType:'json',
          				  type : 'POST',  
          				  url : '<%=basePath%>/project/findConfByProjectAndName',// findConfByProject 查全部   findConfByProjectAndName 查名字对应的内容
          				  data :{'projectVersionResourceID':Pid,
          					  'confName':confName},
          				  success: function(result){
          					  rightData = result;
          					  removeData = [];
          					 // confName='';
          				  }
          			 });
          			 hotTable = $("#microserviceTable").data('handsontable');//获取表格的值
          			 var originalData = eval(JSON.stringify(rightData.rightData));
          			 if(originalData!= null && originalData!=""){
          			 	hotTable.loadData(originalData);//给表格赋值 
          			 }else{
          				 hotTable.loadData(eval('[{"textName":"","ConfresourceID":"","value":""}]'));
          			 } 
          			// 恢复成butten状态
          			var ids=confName; 			
                    var idNames=ids.split(".");
    	   		    var spanId="#span_";
    	   		    var inputId="#input_";
    	   		    if(idNames.length!=0){
    	   				for(var i=0;i<idNames.length;i++) {
    	   					spanId+=idNames[i];
    	   					inputId+=idNames[i];
    	   				}
    	   		    } 
          			$(spanId).show();
          			$(inputId).removeAttr("style");
        			$(inputId).attr("style","display:none;");
                   //$("input[name='btnName']").attr("style","display:none;");
                    //$("span[name='spName']").show();
    
        			
               }, 300);
           });
           $("#buttonDivTab").bind("dblclick", function() { //双击事件 
                clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理            
                rememberName=confName;
                 var ids=confName;
                 var idNames=ids.split(".");
    		     var spanId="#span_";
    		     var inputId="#input_";
    		     if(idNames.length!=0){
    				for(var i=0;i<idNames.length;i++) {
    					spanId+=idNames[i];
    					inputId+=idNames[i];
    				}
    		    }
    			$(spanId).hide();
    			$(inputId).removeAttr("style");
    			$(inputId).attr("style","border:none;color: black;");
    			 
           }); 
    
    });	

    单击 给当前button添加选中的样式,去掉其他button的样式,然后触发点击事件,获取button 的input标签的value去数据库查值,之后重新加载表格。

    双击: button 的span 隐藏 ,input 输入框 去掉隐藏样式显示到button中来,需要注意的是:

    单双击时间绑定在同一个元素上是会冲突的,双击事件失效,永远是触发的是单击事件。处理方式加一个事件执行时间的函数。在单双击事件执行之前放空执行时间。一般是在单击事件加setTimeOut函数 ,通常加参数300毫秒。

    需要注意的是 :无论单双击 所有操作代码都要写在  clearTimeout(timer);  之后,才会触发双击事件。要先清空上次单击事件的时间。

    页面:

     页面的表格使用的handsontable,对新手不太友好的表格,因为关于他的资料太少了,估计用的人也不多。。。

    这个组建的好处就是能像excel一样处理数据,功能比较强大,它能完成全选+复制 然后ctrl+v 表格能粘贴所有的数据过来(但我看来,bootstrpttable 一样厉害),他的数据源必须是数组或者数组对象。代码:

     $('#microserviceTable').handsontableExpand().handsontable(
        		{
        			startRows : 0,
        			colHeaders : function(col) {
        				switch (col) {
        				case 0:
        					return '';
        				case 1:
        					return '<span style="float: center;">当前工程配置</span>';
        				case 2:
    	    				return '<span style="float: center;">说明信息</span>';
        				case 3:
    	    				return '';	
        				case 4:
    	    				return '';
        				}	
        			},
        			colWidths : [50,325,325,0,0],
        			hiddenColumns : {
        				columns : [3,4],
        			},
        			rowHeights: 35,
        			fillHandle:false,
        			fixedColumnsLeft:true,
        			rowHeaders:true,
        			autoWrapRow:true,
        			checkAllColumns:['ischecked'],
        			afterCheckAll:[{'column':'ischecked'}],
        			columns : [ {
        				data : 'ischecked',
        				type : 'checkbox'
        			},{
        				data : 'textName',
        				type : 'text',
        				//renderer : rightDescriptionRenderer,
        			}, {
        				data : 'value',
        				type : 'text'
        			},
        			{
        				data : 'ConfresourceID',
        				type : 'text'
        			},
        			{
        				data : 'projectVersionResourceID',
        				type : 'text'
        			}  ]
        		}); 
     	        $("#microserviceTable").handsontable('render');
    			 initMicroserviceTable(Pid);
    			 //展示 页面
    			 $("#distributeProjectDiv").panelRight('open');
    }
    
    //初始化表格
    function initMicroserviceTable(Pid){
    	var rightData;	
    
    	$.ajax({
    		  async : false,
    		  cache:false,
    		  dataType:'json',
    		  type : 'POST',  
    		  url : '<%=basePath%>/project/findConfByProjectAndName',
    		  data :{'projectVersionResourceID':Pid,
    			  'confName':confName},
    		  success: function(result){
    			  rightData = result;
    			  removeData = [];
    			 // confName='';
    		  }
    	 });
    	 hotTable = $("#microserviceTable").data('handsontable');//获取表格的值
    	 var originalData = eval(JSON.stringify(rightData.rightData));
    	 if(originalData!= null && originalData!=""){
    	 	hotTable.loadData(originalData);//给表格赋值 
    	
    	 }else{
    		 hotTable.loadData(eval('[{"textName":"","ConfresourceID":"","value":""}]'));
    	 }
    	 
    }

    handsontable这个表格 个人感觉比较重要的方法:

    申明/初始化表格的时候(在表格中设置的效果):

    1. 设置列头: colHeaders : function(col) {
                          switch (col) {
                          case 0:
                              return '';
                          case 1:
                              return '<span style="float: center;">当前工程配置</span>';
                          case 2:
                              return '<span style="float: center;">说明信息</span>';
                          case 3:
                              return '';    
                          case 4:
                              return '';
                          }    
                      },
    2. 各列占的宽度(不能用百分比,精确数字PX):colWidths : [50,325,325,0,0],
    3. 要隐藏的列:hiddenColumns : {
                          columns : [3,4],
                      }, //只显示0 1,2 三列,4,5 列隐藏,用于传值
    4. 给表格加个行头,在表格的最左侧固定加一列序号:1,2...,从rowHeaders:true,
    5. 全选:checkAllColumns:['ischecked'],  使用他需要引入一个js文件,handsontableExpand.js,你没有不要紧(我给你),你可以新建一个js文件,就以这个名字命名,内容我粘到这里,想体验的可以站过去,然后在你的页面引入你新建的页面,注意,这个全选的表格名字是hotTable写死的,需要你将自己的hangsontable表格名字也定义成hotTable。然后全选就可以了。js内容:(注意,引入js要确保路径正确,以当前的jsp为主,然后找js对应的位置)
      (function($, h, c) {
      	var a = $([]),
      	e = $.resize = $.extend($.resize, {}),
      	i,
      	k = "setTimeout",
      	j = "resize",
      	d = j + "-special-event",
      	b = "delay",
      	f = "throttleWindow";
      	e[b] = 250;
      	e[f] = true;
      	$.event.special[j] = {
      		setup: function() {
      			if (!e[f] && this[k]) {
      				return false;
      			}
      			var l = $(this);
      			a = a.add(l);
      			$.data(this, d, {
      				w: l.width(),
      				h: l.height()
      			});
      			if (a.length === 1) {
      				g();
      			}
      		},
      		teardown: function() {
      			if (!e[f] && this[k]) {
      				return false;
      			}
      			var l = $(this);
      			a = a.not(l);
      			l.removeData(d);
      			if (!a.length) {
      				clearTimeout(i);
      			}
      		},
      		add: function(l) {
      			if (!e[f] && this[k]) {
      				return false;
      			}
      			var n;
      			function m(s, o, p) {
      				var q = $(this),
      				r = $.data(this, d);
      				if(r==null){
      					var l = $(this);
      					$.data(this, d, {
      						w: l.width(),
      						h: l.height()
      					});
      					r = $.data(this, d);
      				}
      				r.w = o !== c ? o: q.width();
      				r.h = p !== c ? p: q.height();
      				n.apply(this, arguments);
      			}
      			if ($.isFunction(l)) {
      				n = l;
      				return m;
      			} else {
      				n = l.handler;
      				l.handler = m;
      			}
      		}
      	};
      	function g() {
      		i = h[k](function() {
      			a.each(function() {
      				var n = $(this),
      				p = this.parentNode,
      				m = n.width(),
      				l = n.height(),
      				o = $.data(this, d);
      				if ((!$(this).hasClass('wtHider')&&m !== o.w)||($(this).hasClass('wtHider')&& (l !== o.h||p.clientWidth!==$(p).width()||p.clientHeight!==$(p).height()))) {
      					n.trigger(j, [o.w = m, o.h = l]);
      				}
      			});
      			g();
      		},
      		e[b]);
      	}
      })(jQuery, this);
      HandsontableExpand = function(obj) {
      	var hot = obj.data('handsontable');
      	var handsontableExpand = this;
      	this.handsontable=function(settings){
      		obj.handsontable(settings);
      		hot = obj.data('handsontable');
      		if('checkAllColumns' in settings)
      			this.createAllCheck(settings['checkAllColumns']);
      		if('afterCheckAll' in settings){
      			var afterCheckAllArr = settings['afterCheckAll'];
      			for(i=0;i<afterCheckAllArr.length;i++)
      				this.afterCheckAll(afterCheckAllArr[i]['column'],afterCheckAllArr[i]['function']);
      		}
      		if('afterUndoRedo' in settings)
      			this.undoRedo(settings['afterUndoRedo']);
      		obj.find(".leftHead").parent().parent().css({'text-align': 'left','padding-left': '12px'});
      	}
      	this.undoRedo = function(afterBackOffOrForward) {
      		this.undo(afterBackOffOrForward);
      		this.redo(afterBackOffOrForward);
      	};
      	this.undo = function(afterBackOff) {
      		hot.undoRedo.undo = function() {
      			var flag = this.isUndoAvailable();
      			if (flag) {
      				var action = this.doneActions.pop();
      				this.ignoreNewActions = true;
      				var that = this;
      				action.undo(this.instance, function() {
      					that.ignoreNewActions = false;
      					that.undoneActions.push(action);
      				});
      			}
      			if (afterBackOff != null && afterBackOff != undefined) {
      				var nextflag = this.isUndoAvailable();
      				afterBackOff(flag, "Z", nextflag);
      			}
      		};
      	};
      	this.redo = function(afterForward) {
      		hot.undoRedo.redo = function() {
      			var flag = this.isRedoAvailable();
      			if (flag) {
      				var action = this.undoneActions.pop();
      				this.ignoreNewActions = true;
      				var that = this;
      				action.redo(this.instance, function() {
      					that.ignoreNewActions = false;
      					that.doneActions.push(action);
      				});
      			}
      			if (afterForward != null && afterForward != undefined) {
      				var nextflag = this.isRedoAvailable();
      				afterForward(flag, "Y", nextflag);
      			}
      		};
      	};
      	this.createOrRemoveRow = function(afterCreateRowFun, afterRemoveRowFun) {
      		this.createRow(afterCreateRowFun);
      		this.removeRow(afterRemoveRowFun);
      	};
      	this.createRow = function(afterCreateRowFun) {
      		var thisAfterCreateRow = hot.getSettings().afterCreateRow;
      		hot
      				.updateSettings({
      					afterCreateRow : function() {
      						var rows = hot.getData().length;
      						hot.updateSettings({
      							height : (35 * rows) + 45
      						});
      						if (thisAfterCreateRow != null
      								&& thisAfterCreateRow != undefined)
      							thisAfterCreateRow();
      						if (afterCreateRowFun != null
      								&& afterCreateRowFun != undefined)
      							afterCreateRowFun();
      					}
      				});
      	};
      	this.removeRow = function(afterRemoveRowFun) {
      		var thisAfterRemoveRow = hot.getSettings().afterRemoveRow;
      		hot
      				.updateSettings({
      					afterRemoveRow : function() {
      						var rows = hot.getData().length;
      						hot.updateSettings({
      							height : (35 * rows) + 45
      						});
      						if (thisAfterRemoveRow != null
      								&& thisAfterRemoveRow != undefined)
      							thisAfterRemoveRow();
      						if (afterRemoveRowFun != null
      								&& afterRemoveRowFun != undefined)
      							afterRemoveRowFun();
      					}
      				});
      	};
      	this.createRowPrevious = function(columnNameOrNum) {
      		var ischeckedArr;
      		if (typeof columnNameOrNum === "string")
      			ischeckedArr = hot.getDataAtProp(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number")
      			ischeckedArr = hot.getDataAtCol(columnNameOrNum);
      		var checkIndex = $.inArray(true, ischeckedArr);
      		var checkIndexNext = $.inArray(true, ischeckedArr, checkIndex + 1);
      		if (checkIndex >= 0) {
      			if (checkIndexNext < 0) {
      				hot.alter('insert_row', checkIndex);
      				return true;
      			} else {
      				alertMsg("请只选择一条数据插入上一行", "warning");
      				return false;
      			}
      		} else {
      			alertMsg("请选择一条数据插入上一行", "warning");
      			return false;
      		}
      	};
      	this.createRowNext = function(columnNameOrNum) {
      		var ischeckedArr;
      		if (typeof columnNameOrNum === "string") 
      			ischeckedArr = hot.getDataAtProp(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number") 
      			ischeckedArr = hot.getDataAtCol(columnNameOrNum);
      		var checkIndex = $.inArray(true, ischeckedArr);
      		var checkIndexNext = $.inArray(true, ischeckedArr, checkIndex + 1);
      		if (checkIndex >= 0) {
      			if (checkIndexNext < 0) {
      				hot.alter('insert_row', checkIndex + 1);
      				return true;
      			} else {
      				alertMsg("请只选择一条数据插入下一行", "warning");
      				return false;
      			}
      		} else {
      			alertMsg("请选择一条数据插入下一行", "warning");
      			return false;
      		}
      	};
      	this.isAllCheck=function(columnNameOrNum){
      		var ischeckedArr;
      		if (typeof columnNameOrNum === "string")
      			ischeckedArr = hot.getDataAtProp(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number") 
      			ischeckedArr = hot.getDataAtCol(columnNameOrNum);
      		var notCheckIndex = $.inArray(false, ischeckedArr);
      		var nullCheckIndex = $.inArray(null, ischeckedArr);
      		if(notCheckIndex<0&&nullCheckIndex<0) return true;
      		else return false;
      	};
      	this.updateWidth=function(newWidth) {
      		hot.updateSettings({colWidths : newWidth});
      	};
      	this.createAllCheck=function(columnNameOrNum) {
      		var allCheckColNum=[];
      		for(i=0;i<columnNameOrNum.length;i++){
      			if (typeof columnNameOrNum[i] === "string") 
      				allCheckColNum.push(hot.propToCol(columnNameOrNum[i]));
      			else if (typeof columnNameOrNum[i] === "number") 
      				allCheckColNum.push(columnNameOrNum[i]);
      		}
      		var thisColHeaders = hot.getSettings().colHeaders;
      		var thisAfterLoadData = hot.getSettings().afterLoadData;
      		var thisBeforeRender = hot.getSettings().beforeRender;
      		hot.updateSettings({colHeaders : function (col) {
      			if($.inArray(col, allCheckColNum)>-1){
      				var txt = "<input name='checkall"+col+"' type='checkbox' class='checker' ";
                      txt += obj.data('isChecked'+col) ? 'checked="checked"' : '';
                      txt += ">";
                      return txt;
      			}
      			if(thisColHeaders)
      				return thisColHeaders(col);
      		},
      		afterLoadData:function(){
      			for(i=0;i<allCheckColNum.length;i++)
      				obj.data('isChecked'+allCheckColNum[i],false);
      			obj.handsontable('render');
      			if(thisAfterLoadData)
      				thisAfterLoadData();
      		},
      		beforeRender:function(){
      			for(i=0;i<allCheckColNum.length;i++)
      				obj.data('isChecked'+allCheckColNum[i],handsontableExpand.isAllCheck(allCheckColNum[i]));
      			if(thisBeforeRender)
      				thisBeforeRender();
      		}
      		});
      		for(i=0;i<allCheckColNum.length;i++){
      			obj.on('mouseup', 'input[name=checkall'+allCheckColNum[i]+']', function (event) {
      				var num = parseInt($(this).attr("name").replace("checkall",""));
      				obj.data('isChecked'+num,!$(this).is(':checked'));
      				var checkedcol = hotTable.propToCol("ischecked");
      				hot.populateFromArray(0, num, [[!$(this).is(':checked')]], hot.countRows()-1, num);
      				var fun = obj.data('aftercheckfun'+num);
      				if(fun!=null)
      					fun();
      		    });
      		}
      	};
      	this.afterCheckAll=function(columnNameOrNum,fun){
      		var colnum;
      		if (typeof columnNameOrNum === "string") 
      			colnum=hot.propToCol(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number") 
      			colnum=columnNameOrNum;
      		obj.data('aftercheckfun'+colnum,fun);
      	};
      }
      $.fn.handsontableExpand = function() {
      	return new HandsontableExpand(this);
      }

       

    6.  设置列的类型以及类型:columns : [ {
                          data : 'ischecked',
                          type : 'checkbox'
                      },{
                          data : 'textName',
                          type : 'text',
                          //renderer : rightDescriptionRenderer,
                      }, {
                          data : 'value',
                          type : 'text'
                      },
                      {
                          data : 'ConfresourceID',
                          type : 'text'
                      },
                      {
                          data : 'projectVersionResourceID',
                          type : 'text'
                      }  ]
                  }); 

    7. 前面的复选框:复选框单独占一列,因此列头需要加一列, 就是列头的case 0: ,此外,columns 需要将type属性改为checkbox,data就是列的业务名字,到时候取值的拿data的内容就可以拿到数据。

    8. hotTable.loadData(originalData);//给表格赋值   这里的originalData 必须是数组或数组对象,否则前台就会报错loadData() 未定义。

    表格加载完成之后(表格数据的获取):

    1. 获取所有的行数: var countRows = hotTable.countRows();
    2. 获取对应行数的列的textName的数据;  hotTable.getDataAtRowProp(i,'textName');
    3. 获取某列的全部数据:hotTable.getDataAtProp("ConfresourceID");
    4. 增加/删除页面的一行数据:     hotTable.alter('insert_row', 行数);  //增加 hotTable.alter('remove_row',行数);//删除
    5. 给表格第0行 第1列 单元格赋值" " : hotTable.setDataAtCell(0,1,"");
    6. 一些其他的方法参照:https://blog.csdn.net/qianqianyixiao1/article/details/81507257

    这个table 的增加 单元格和删除 是这样的:

    //增加行
    var rowID=0;
    function addRowsByNewBut(){
    	rowID=rowID-1;
    	hotTable.alter('insert_row', 0);  
    	hotTable.setDataAtCell(0,1,"");
    }
    
    //页面上移除数据
    var ischeckedArr = hotTable.getDataAtProp("ischecked");    	 
    //计数
    var num=0; 
    for(var i=0;i<ischeckedArr.length;i++){
    	if(ischeckedArr[i]) { 
    		hotTable.alter('remove_row',i-num);
             num++;
    	} 
    }

    主要是hotTable.alter(); 这个方法。批量删除的时候需要定义一个num用来记录选中的行数。

    总结:

    •    拼接代码的时候要仔细,不行就在w3c 和菜鸟教程上 利用假数据动态验证
    •    前端js和html css 知识点也很多 ,不知道真做不出来,都要了解
    •    js全局变量一定要释放,java有虚拟机,js解释性弱类型语言,需要手动释放
    •    多个使用多个class 样式的选择器 可以用"."连接 如:$(".class1.class2.class3....");
    展开全文
  • 通过js脚本实现动态添加HTML标签

    热门讨论 2012-11-23 15:23:27
    一个简单的JS操作可以点击增加HTML标签
  • 运用JavaScript创建html标签添加样式

    千次阅读 2017-10-18 16:10:53
    运用JavaScript创建html标签添加样式
    <html>
        <body>
            <article>
                <p>这是第一段。</p>
            </article>
    
        <script type="text/javascript">
            window.onload = function(){
                var p1 = document.createElement("p");
                var txt1 = document.createTextNode("2017");
                p1.appendChild(txt1);
                var parent = document.getElementsByTagName("article")[0];
                var p2 = document.getElementsByTagName("p")[0];
                parent.insertBefore(p1,p2);
                p1.setAttribute("style","background-color:blue;color:red;width:100px;height:200px")
            }
        </script>
    
        </body>
    </html>

    步骤:
    1.创建一个新的元素节点p;(使用document.createElement(element)方法。)
    2.创建一个新的文本节点;(使用document.createTxetNode(string)方法。)
    3.将新建的文本节点插入新建的元素节点;(使用element.appendChild(node)方法,可向元素节点的末尾添加子节点。)
    4.获取新建元素节点的父节点;(使用document.getElementsByTagName(element)方法。)
    5.获取新建元素插入位置的下一个兄弟节点;
    6.插入新建元素;(使用element.insertBefore(newnode,existingnode)方法。)
    7.为新建元素设置css属性。(使用element.setAttribute(attribute,attribute-value)方法。)
    8.绑定onload事件。(window.onload。)

    展开全文
  • JS动态添加HTML标签

    2011-02-21 11:06:24
    JS里有个数组我想遍历显示在页面的标签里,并且<li><label>最后包含的是标签及值,弄了好长时间也没弄明白 希望知道的大哥帮下忙!小弟不是很懂JS <ul class="two" id="driveLetter"></ul> var driveLetter = ...
  • 先给标签一个id属性,然后根据id的值查找。  document.getElementById("id值"); 可以根据标签名称查找  document.getElementsByTagName("标签名name"); 根据选择器查找页面元素  document....
  • 使用js添加script标签

    千次阅读 2019-04-25 18:07:22
    在开发中可能遇到需要使用到某个js里的方法,但是页面是后端返回的,不方便让后端添加js的时候(同一个页面的模版可能多个页面使用,只有一个页面需要引入js时,最好不要修改模版),可以通过js代码进行添加: ...
  • JS动态添加标签

    千次阅读 2019-08-16 14:05:39
    JS动态添加标签 如代码示例,使用jquery,动态的增加标签: function addDiv(serial) { //最外层父div var div = document.createElement("div"); document.getElementById("form").appendChild(div); ...
  • JS添加iframe标签

    千次阅读 2019-08-19 15:31:07
    //添加iframe标签 var body = document.getElementsByTagName("body"); var div = document.createElement("div"); div.innerHTML = '<iframe id="idFrame" name="idFrame" src="https://www.baidu....
  • js动态添加任何html标签

    千次阅读 2018-03-09 14:17:19
    我认为, 对于html标签来说, 分为闭合和半闭合两种, 当我用js创造一大片html代码的时候, 会容易出现很杂乱的观感,而且并不容易维护. 那么我将创建闭合和半闭合标签作为两个方法, 每次创建就调用一次, 返回字符串...
  • js动态添加html标签,此html中包含onclick等事件,必然要引用函数,那么函数中的参数如何写? 1,function showi(m){ alert(m); } function change(){ var x=6; document.write('&lt;a href="#" ...
  • 如下所示:实现思路:使用DOM的appendChild方法,即可向html标签添加内容例:javascriptHtml标签添加内容的示例分享,如下所示:maomao365.com jshtml标签追加内容的方法分享window.onload = function(){var b =...
  • JS动态添加li标签

    千次阅读 2020-05-29 16:51:46
    HTML代码 <div class="col-xs-12"> <ul id="tabName" class=... //动态添加li标签 var ul = document.getElementById("tabName"); for (let i =0 ; i < str.length; i++){ var sname= str[i];
  • 几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等。html标签便捷的操作,深受大家的喜欢。如何使用javascript来操作HTML控件,下面我介绍下比较麻烦的几个控件
  • jQuery实现添加标签标签的头部在添加是以A、B、C、D、E···一次往后排
  • js添加标签、重新加载js,css

    千次阅读 2017-12-18 17:40:27
    js 添加标签: 直接appendChild(字符串)也可以;(添加标签appendChild(),添加标签append()) var num=(num-1)*pgsize; var input_file = document.createElement("input"); input_file....
  • js循环添加标签并判断添加的次数

    千次阅读 2015-06-11 09:31:18
    js循环添加图片并判断添加的次数: HTML: 上传图片: 添加 JS: function showPhoto(dom){ var pv=$(dom).parent(); if(pv.children("div").length){ var str="" +
  • Three.js 模型添加标签

    千次阅读 2020-10-27 22:17:27
    在很多的实际的项目中,你可能需要给一个Three.js的模型添加标签,那么我们可以使用three.js的精灵模型来表示,使用精灵模型表示一个模型对象的标签,那么精灵模型就要位于模型对象的附近。可以获得要标注模型的世界...
  • 在富文本编辑器下方添加自定义标签,初始化一个&lt;input&gt;元素,然后按照用户需求自行添加,最多5个,这样弄出来一排整齐的小框框,效果如图。贴出主要代码片段&lt;div class="card m-0 p-0&...
  • Javascript 动态添加标签

    千次阅读 2007-04-20 19:15:00
    Javascript动态添加标签 html>head>script>...var i = 0;function add() ...{ i++; var tbl = document.all.tbl; var tr = tbl.insertRow(); var td = tr.insertCell(); td.innerHTML = ""+i+...
  • CWML是全新JavaScript微框架,可扩展您HTML网站并增加对定义自定义React式标签的支持。 微框架仅占用2kb,并且不需要任何编译。 安装 复制src / cwml.min.js的代码 在项目dist文件夹中创建文件cwml.min.js 在您的....
  • 原生JS 实现给标签添加类名

    千次阅读 2019-12-20 10:28:48
    原生js点击添加类名
  • 解决js添加标签hover不起作用

    千次阅读 2018-11-22 21:57:14
    首先,这个元素是在js里面动态添加的,这里我定义一个class=my_close $("#myTab").append("&lt;a class='my_close'&gt;X&lt;/a&gt;");  css实现hover: .my_close:hover...
  • 动态添加JS文件可以这样添加。 &lt;div onclick="var newNode = document.createElement("script");newNode.type="text/javascript";newNode.src="test";document.body....
  • js实现动态添加标签

    千次阅读 2020-02-26 17:07:29
    js实现动态添加标签页,能够进行标签添加,删除,修改,内容切换 addTab.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &...
  • 这件事情是这样的:通过JavaScript更改body标签样式function adjustWidth() {width = 0;if (window.innerHeight) {width = window.innerWidth;} else if (document.documentElement && docume...
  • String just = "我是正的"; String skew = "我是斜的"; mText.setText(Html.fromHtml(just +"<br />"+"<i>"+skew));

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 307,414
精华内容 122,965
关键字:

js添加html标签