<div>
<table class="table table-bordered">
<thead>
<tr>
<th >文件名</th>
<th >文件类型</th>
<th >文件大小</th>
<th >上传日期</th>
<th></th>
</tr>
</thead>
<tbody id="tmain"></tbody>
</table>
</div>
<div>
<input type="file" id="upfile" name="upfile" style="display:none"
onchange="changeAgentContent()"/>
<input type="button" class="btn btn-primary"
onclick="document.getElementById('upfile').click()"
value='选择...'/>
<script type="text/javascript">
var files=[];
function changeAgentContent() {
var value = document.getElementById("upfile").value;
var split = value.split("\\");
var fileType=value.split(".")
var elementById = document.getElementById("tmain");
var newRow=elementById.insertRow();
var newTd0=newRow.insertCell();
var newTd1=newRow.insertCell();
var newTd2=newRow.insertCell();
var newTd3=newRow.insertCell();
var newTd4=newRow.insertCell();
newTd0.innerText=split[split.length - 1];
newTd1.innerText=fileType[fileType.length - 1];
newTd2.innerText=document.getElementById("upfile").files[0].size/1000+"kb";
newTd3.innerText=Hap.formatDate(new Date());
newTd4.innerHTML='<span class="btn btn-danger" οnclick="del(this)">删除</span>';
var fileMsg={
filename:newTd0.innerText,
fileType:newTd1.innerText,
filesize:newTd2.innerText,
fileDate:newTd3.innerText
}
files.push(fileMsg);
console.log(files);
}
function del(cc){
var table = cc.parentNode.parentNode.parentNode;
var td=cc.parentNode.parentNode;
table.removeChild(td);
}
</script>
</div>
JS动态添加表格行,删除表格行
最新推荐文章于 2023-03-27 15:57:49 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)