//获取元素 //点击button //获取rol //获取col //创建table节点 //根据rol插入行数 //根据col插入列数 //在最后一个列中插入一个a标签 //点击a标签删除当前行
<input type="text" placeholder="输入行"/> <input type="text" placeholder="输入列"/> <button>插入表格</button> <script type="text/javascript">var rolObj = document.querySelector("input:nth-of-type(1)"); var colObj = document.querySelector("input:nth-of-type(2)"); var but = document.querySelector("button"); but.onclick = function(){ var rolVal = Number(rolObj.value); var colVal = Number(colObj.value); var table = document.createElement("table"); table.border = ""; var tr = null; var td = null; var a = null; for (var i = 0; i < rolVal; i++) { tr = document.createElement("tr"); table.appendChild(tr); //创建列 for (var j = 0; j <= colVal; j++) { td = document.createElement("td"); tr.appendChild(td); if(j === colVal){ //添加一个a标签用于删除 a = document.createElement("a"); a.innerHTML = "删除"; a.href = "#"; td.appendChild(a); //点击删除当前行 a.onclick = removeRow; }else{ td.innerHTML = i; } } } document.body.appendChild(table); } function removeRow(){ this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); } </script>