前端节点获取，删除table

最新推荐文章于 2024-05-29 00:30:00 发布

原创最新推荐文章于 2024-05-29 00:30:00 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #ul #节点 #Date

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

table

2 篇文章

订阅专栏

本文详细介绍前端如何实现数据的动态加载、删除、清空、更新等操作，涵盖table元素的节点管理，ul元素的值读取，文件上传信息处理，以及数据与时间的获取方法。同时，提供了具体代码实例，帮助开发者快速理解和应用。

获取表，前端自动加载，根据节点对table添加删除

删除节点
清空
根据节点取值
ul取值
文件上传取信息
界面刷新，加载数据库中的数据
在table中加载一行
获取目标节点信息加载到另一个地方
获取时间

删除节点

	//删除一行
   function del(_this){	
	   $(_this).parent().parent().remove();
	}
	//删除一个元素
	function del1(_this){	
	   $(_this).parent().remove();
	}

清空

		//清空
		$("#filename").empty();//<ul id="filename"></ul>
    	$("#typeNo").val("");
    	//在li里面添加元素  response.result.data[i]是请求回来的数据
    	$("#filename").append("<li  value='"+response.result.data[i].url+"'>"+response.result.data[i].localName+"<span onclick='del1(this);' style='margin-left:10px;cursor:pointer;'>x</span></li>");

根据节点取值

//将table下的节点都放入data
var data = [];
$("#iBody tr").each(function(){
			var arr = {};
			var tdArr = $(this).children();
			arr["xuhao"] = tdArr.eq(0).text();
			arr["typeNo"] = tdArr.eq(1).text();
			arr["fileName"] =tdArr.eq(2).find("a").text();
			arr["inputTime"] = tdArr.eq(3).text();
			arr["Uuid"] = tdArr.eq(4).text();
			data.push(arr);	
		});
		//alert(JSON.stringify(data))
		//如果table列表为空 JSON.stringify(data)=="[]"

ul取值

	var ul=document.getElementById("filename").getElementsByTagName("li");
		if(ul.length<=0){
			//空
			return false;
		}
		for(var i=0;i<ul.length;i++){
			var arry1 =ul[i].getAttribute("value").split("fileName=")
			var arry2 =arry1[1].split("&localFileName")
			var arry =ul[i].getAttribute("value").split("localFileName=")
			var fileOb = {fname: arry[1],webName: arry2[0],};
                 fileJson.push(fileOb);
                 //放入另一个定义的位置（从一个div中取出ul放到另一个div中）
			html+="<a href='"+ul[i].getAttribute("value")+"'>"+arry[1]+"</a><br>";
		}

文件上传取信息

		var object = document.getElementById('file');
		var arr = object.files;
		var s=$('input[type=file]').val(); 
		//alert(arr.length);

界面刷新，加载数据库中的数据

	//获取到后台传递的数据
			var json = jQuery.parseJSON($("#a").val());
			$(json)
				.each(
						function(i, v) {
							var html = "";
							html += "<tr><td>"
									+ ($("#iBody tr").length + 1)
									+ "<input type='hidden' name='webfileName' value=''></td>";
							html += "<td>" + v.typeNo + "</td>";
							html += "<td>";
							var obj = eval('(' + v.webfileName + ')');
							//循环第二层
							$.each(obj, function(index, content) {
								html += "<a href='../report/downLoad?fileName="
										+ content.webName + "&localFileName="
										+ content.fname + "'>" + content.fname
										+ "</a><br>";
							});
							html += "</td>";
							html += "<td>" + v.inputTime + "</td>";
							html += "<td>用户上传</td>";
							html += "<td>";
							if (statusno == 20) {
								html += " <a onclick='del(this)'>删除</a><a onclick='update(this)'>/编辑</a>";
							}
							html += "</td>";
							html += "<td style='display:none'><a >"
									+ v.webfileName + "</a></td></tr>";
							$("#iBody").append(html);
						});

在table中加载一行

		$(".btn-success").click(
				function() {
					var myDate = new Date();
					var file = $("#file").val();
					var typeNo = $("#typeNo").val();
					if (typeNo == "") {
						//为空
						return false;
					}
					var arr = document.getElementById('file').files;
					var ul = document.getElementById("filename")
							.getElementsByTagName("li");
					if (ul.length <= 0) {
						//为空
						return false;
					}
					//alert(myDate.toLocaleString())  ie不能使用
					var html = "";
					html += "<tr><td>" + ($("#iBody tr").length) + "></td>";
					html += "<td>" + typeNo + "</td>";
					html += "<td>";
					var fileJson = [];
					
					for (var i = 0; i < ul.length; i++) {
						var arry1 = ul[i].getAttribute("value").split(
								"fileName=")
						var arry2 = arry1[1].split("&localFileName")
						var arry = ul[i].getAttribute("value").split(
								"localFileName=")
						var fileOb = {
							fname : arry[1],
							webName : arry2[0],
						};
						//后期
						fileJson.push(fileOb);
						html += "<a href='" + ul[i].getAttribute("value")
								+ "'>" + arry[1] + "</a><br>";
					}
					html += "</td>";
					html += "<td>" + sj() + "</td>";
					html += "<td><a onclick='del(this)'>删除</a><a onclick='update(this)'>/编辑</a></td>";
					html += "<td style='display:none'><a >"
							+ JSON.stringify(fileJson) + "</a></td></tr>";
					$("#iBody").append(html);
				});

获取目标节点信息加载到另一个地方

var row=_this.parentNode.parentNode;
   		$("#filename").empty();
    	$("#typeNo").val(row.cells[1].innerText);
   		var json = jQuery.parseJSON(row.cells[6].innerText);
	
		$(json)
				.each(
						function(i, v) {
						var m="fileName="+v.webName+"&localFileName="+v.fname;
						    	$("#filename").append("<li  value='"+m+"'>"+v.fname+"<span onclick='del1(this);' style='margin-left:10px;cursor:pointer;'>x</span></li>");
						});
						$(_this).parent().parent().remove();
						//打开另一个层
   		document.getElementById("yz_sck").style.display='';

获取时间

function sj(){
    var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var date = d.getDate();
            var day = d.getDay();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            if (h < 10) { h = "0" + h; }
            if (m < 10) { m = "0" + m; }
            if (s < 10) { s = "0" + s; }
            var week = ["日", "一", "二", "三", "四", "五", "六"];
            var str = year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s;
            return str;
   }

var y=[{"a":"a.txt","b":"[{\"name\":\"a.sql\",\"web\":\"a94b0abda.sql\"},{\"name\":\"11111.txt\",\"web\":\"e11c5d44611.txt\"}]"}]
//处理格式
var json = jQuery.parseJSON(y);
			$(json)
				.each(
						function(i, v) {
						alert(v.a);
						//取第二次（b）
						var obj = eval('(' + v.b+ ')');
						$.each(obj, function(index, content) {
								content.web 
							});
						});