之前有个需求，就是需要一个不固定行和列的表格，第一行的所有列的标题内容，用来表示数据对象中的key，而表格中的其他行，分别显示对应key的value。
起始显示一行一列的表格th，然后根据用户是否输入值，动态增加行和列，每次根据倒数第二行是否有值，以此来判断是否要新增行，每次根据倒是第二列是否有值，以此来判断是否要新增列，然后根据行和列的值是否清空，以此来判断是否要删除行和列。
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
table{
border-collapse:collapse;
background: #fff;
}
tr{
height: 50px;
}
td{
width: 300px;
height: 100px;
background: #f60;
border-right: 1px solid #000;
}
input{
width: 100%;
height: 100%;
font-size: 30px;
background: lightblue;
outline: none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="text" placeholder="请输入标题">
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
function $(val){
if(val.indexOf(0)=="#"){
return document.getElementById(val);
}else if(val.indexOf(0)=="."){
return document.getElementsByClassName(val);
}else{
return document.getElementsByTagName(val);
}
}
// 表头tr
var TitleTr = $("thead")[0].lastElementChild;
// 表内容
var Tbody = $("tbody")[0];
// 删除行开关
var deleteTr = true;
// 删除列开关
var deleteTd = false;
// var i = false;
setInterval(function(){
// 所有行
var allTr = $("tr");
// 最后一行的下标
var lastTrIndex = allTr.length-1;
// 最后一行
var lastTr = allTr[lastTrIndex];
// 最后一行的所有元素
var lastAllTd = lastTr.children;
// 循环最后一行中所有的td/th
for(var a=0;a<lastAllTd.length;a++){
// 如果其中有一个元素的子元素input有值，则创建行
if(lastAllTd[a].lastElementChild.value != ""){
// 创建一行
let tr = document.createElement("tr");
// 循环，判断创建的行要包括多少列
for(var b=0;b<lastAllTd.length;b++){
// 创建input，创建td,追加到tr，追加到tbody
let input = document.createElement("input");
input.setAttribute("placeholder","请输入内容");
let td = document.createElement("td");
td.appendChild(input);
tr.appendChild(td)
Tbody.appendChild(tr);
}
}
}
// 循环每一行的最后一列
for(var c=0;c<allTr.length;c++){
// 如果每一行的最后一列中的input框不为空，创建列
if(allTr[c].lastElementChild.lastElementChild.value != ""){
// 循环所有行，以此来判断创建多少行的最后一列
for(var d=0;d<allTr.length;d++){
if(d == 0){
// 创建input，创建td,追加到tr，追加到tbody
let input = document.createElement("input");
input.setAttribute("placeholder","请输入标题");
let th = document.createElement("th");
th.appendChild(input);
TitleTr.appendChild(th)
}else{
// 创建input，创建td,追加到tr，追加到tbody
let input = document.createElement("input");
input.setAttribute("placeholder","请输入内容");
let td = document.createElement("td");
td.appendChild(input);
allTr[d].appendChild(td)
}
}
}
}
// 判断是否要删除空行
if(allTr[lastTrIndex-1]){
// 倒数第二行的所有元素
var lastPreAllTd = allTr[lastTrIndex-1].children;
// 判断最后一行的前一行的元素是否为空
for(var e=0;e<lastPreAllTd.length;e++){
if(lastPreAllTd[e].lastElementChild.value != ""){
deleteTr = false;
break;
}else{
deleteTr = true;
}
}
// 如果倒数第二行为空，删除最后一行
if(deleteTr){
allTr[lastTrIndex].remove()
}
}
// 判断是否要删除空列
// 循环所有行
for(var f=0;f<allTr.length;f++){
// 循环每一行的倒数第二列
if(allTr[f].children[allTr[f].children.length-2]){
if(allTr[f].children[allTr[f].children.length-2].lastElementChild.value != ""){
deleteTd = false;
break;
}else{
deleteTd = true;
}
}
}
// 如果判断是true，即可以删除空列
if(deleteTd){
// 循环所有行
for(var g=0;g<allTr.length;g++){
// 删除每一行的最后一列
if(allTr[g].children[allTr[g].children.length-2]){
// 删除每一行的最后一列
allTr[g].children[allTr[g].children.length-1].remove();
}
}
}
}, 16)
</script>
效果图：
image
好了，以上就是动态实现行和列的方法和效果。
如有问题，请指出，接受批评。
个人微信公众号：
image
网友评论