在HTML中怎么实现删除table表格中的一行

html-css08

在HTML中怎么实现删除table表格中的一行,第1张

给TABLE定义个名字。然后用DHTML

获取表格。点删除获取

点的是表格的第几行

然后进行删除。只能删除静态页，刷新下被删的又有了

明天找我要代码

 <script type="text/javascript">

function getData() {

var listNo = document.getElementById('listNo').value

var batchNum = document.getElementById('batchNum').value

var classNo = document.getElementById('classNo').value

var exp = document.getElementById('exp').value

var number = document.getElementById('number').value

var per = [

{ listNo1: listNo, batchNum1: batchNum, classNo1: classNo, exp1: exp, number1: number },

]

var tbody = document.getElementById('tbMain')

for (var i = 0 i < per.length i++) { //遍历一下json数据

var trow = getDataRow(per[i]) //定义一个方法,返回tr数据

tbody.appendChild(trow)

}

}

function getDataRow(h) {

var row = document.createElement('tr') //创建行

var listNoCell = document.createElement('td') //创建第一列listNo

listNoCell.innerHTML = h.listNo1 //填充数据

row.appendChild(listNoCell) //加入行 ，下面类似

var batchNumCell = document.createElement('td')//创建第二列batchNum

batchNumCell.innerHTML = h.batchNum1

row.appendChild(batchNumCell)

var classNoCell = document.createElement('td')//创建第三列classNo

classNoCell.innerHTML = h.classNo1

row.appendChild(classNoCell)

var expCell = document.createElement('td')//创建第四列exp

expCell.innerHTML = h.exp1

row.appendChild(expCell)

var numberCell = document.createElement('td')//创建第五列number

numberCell.innerHTML = h.number1

row.appendChild(numberCell)

//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮

var delCell = document.createElement('td')//创建第六列，操作列

row.appendChild(delCell)

var btnDel = document.createElement('input') //创建一个input控件

btnDel.setAttribute('type', 'button') //type="button"

btnDel.setAttribute('value', '删除')

btnDel.setAttribute('onclick', 'delete1(this)')

delCell.appendChild(btnDel) //把删除按钮加入td

//删除操作

return row //返回tr数据

}

function delete1(obj) {

if (confirm("确定删除这一行嘛？")) {

//找到按钮所在行的节点，然后删掉这一行

obj.parentNode.parentNode.remove()

// obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode)

//var curRow = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.rowIndex

// tbMain.deleteRow(curRow)

//btnDel - td - tr - tbody - 删除(tr)

//刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除

}

}

</script>

 请采纳

需要准备的材料分别是：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，插入需要的表格。

2、之后在index.html的<script>标签中，输入代码：$('button').click(function () {$(this).parent().parent().remove()})。

3、浏览器运行index.html页面，点击第1行的删除按钮，确实删除了第1行，并且代码不是以行号的形式。