html- ul追加li

html:

<button type="button" class="btn btn-default" id="importMaterials">导入项目材料</button>
			<input type="file" class="custom-file-input" multiple="multiple" id="filepath" onchange="selectTicket(event)" style="display: none;">
			<div id = "uploadbox" style="margin-top:10px ;">
		    		<span style="display:inline;" class="list-group-item">已选择的文件 :)</span>
		    </div>

方法:

			$("#importMaterials").click(function() {
					$("#filepath").click();
				});
				
			function selectTicket(event) {
				$("#ulelement li").remove();
				var files = event.target.files;
				var ulId = document.getElementById('ulelement');

				for(var i = 0; i < files.length; i++) {
					var file = files[i].name; 
					console.log(file);
					var aLi = document.createElement('li');
					aLi.setAttribute("class", "list-group-item");
					aLi.innerHTML = file;
					ulId.appendChild(aLi);
				}
			}

在这里插入图片描述


分页思路:
⭐html:

<div class="col-md-1"></div>
	<div class="col-md-10" align="center" style="padding-left: 42px;">
		<table class="table table-striped table-sm" id="datatable">
			<thead>
				<tr>
					<th>序号</th>
					<th>^.^</th>
					<th>id</th>
					<th>projectName</th>
					<th>createTime</th>
					<th>updateTime</th>
					<th id="delAll">多项删除</th>
					<!-- <th class="glyphicon  glyphicon-th-list  " id="delAll"></th> -->
				</tr>
			</thead>
			<tbody id="tbody">
			</tbody>
		</table>

	</div>
	<div class="col-md-1"></div>

	<div class="col-md-1"></div>
	<div class="col-md-10" align="center" style="padding-left: 42px;">
		<ul class="pagination" id="ulelement">
		<!-- 
			<li><a  aria-label="Previous"  onclick="go(1);" ><span>1</span></a></li>
			<li><a  aria-label="Previous"  onclick="go(2);"><span>2</span></a></li>
		 -->
		</ul>
	</div>
	<div class="col-md-1"></div>

⭐步骤

	//第一步:pagination class对象
	var ulitem = $("#ulelement");

	//第二部: 清空对象内html内容. //	$(".pagination li").remove();
	$(".pagination li").remove();
	$("#tbody tr").remove();
	
	//第三部:ajax請求内容
	$.ajax({
		type : "get",
		url : "/data/projectList/" + num,
		data : num,
		datatype : "json",
		async : false,
		success : function(data) {
			console.log(data.rainbow);
			console.log(data);
			for (var i = 0; i < data.rainbow.length; i++) {
				item += htmlValueTag(data.rainbow[i]);
			}
			console.log(item);
			for (var i = 0; i < data.data.length; i++) {
				liItemArr[i] = data.data[i];
			}
		} 	
	});
	//使用htmlValueTag方法添加html内容.
	for (var i = 0; i < liItemArr.length; i++) {
		var tritem = $("<tr id= "+liItemArr[i].id+" projectname = "+liItemArr[i].projectName+">"
				+"<td >⭐"+(i+1)+"</td>"
				+ "<td ><input type='checkbox' name='project' /></td>"
				+ "<td id="+liItemArr[i].id+">"+ liItemArr[i].id+ "</td>"
				+ "<td>"+ liItemArr[i].projectName+ "</td>"
				+ "<td>"+renderTime( liItemArr[i].createTime)+ "</td>"
				+ "<td>"+renderTime( liItemArr[i].updateTime)+ "</td>"
				+ "<td "
				+ "onclick='delfun("+ liItemArr[i].id+ ",this)'>删除</td>"+ "</tr>");
				/* + "<td class='glyphicon glyphicon-minus-sign deltd'"
				+ "onclick='delfun("+ liItemArr[i].id+ ",this)'></td>"+ "</tr>"); */
	//	var $table = $('table tbody');
		$("#tbody").append(tritem);
	}
	$("#ulelement").append(item);

⭐转时间格式:

	function renderTime(date) {
  		var dateee = new Date(date).toJSON();
  		return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
	}
由 "2019-01-03T00:18:21.000+0000" 转 "2019-07-02 14:11:57"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值