如何用js删除表格一行或者多行

JavaScript07

如何用js删除表格一行或者多行,第1张

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

1、首先，打开html编辑器，新建html文件，例如：index.html，编写基础代码。

2、在index.html中的<script>标签，输入js代码：$('table tr').eq(1).remove()$('table tr').eq(1).remove()。

3、浏览器运行index.html页面，此时发现表格的最后2行都被js删除了。

<input type="button" value="创建一个新表格" onclick="createTable(800,8,5)" />

<script type="text/javascript">

function createTable(width,rows,cells)

{

//创建一个表格对象

var mytable=document.createElement("table")

mytable.cellSpacing="1px"

//创建一个表头对象

var mythead=document.createElement("thead")

for(a=0a<1a++)

{

var myrow=document.createElement("tr")

for(b=0b<cellsb++)

{

var mytd=document.createElement("td")

mytd.innerHTML="表 头 " +(b+1)

mytd.style.cssText="text-align:center"

myrow.appendChild(mytd)

}

mythead.appendChild(myrow)

}

//创建一个表体对象

var mytbody=document.createElement("tbody")

for(i=0i<rowsi++)

{

var myrow=document.createElement("tr")

for(j=0j<cellsj++)

{

var mytd=document.createElement("td")

mytd.style.backgroundColor="#fff"

mytd.innerHTML="第"+(i+1)+"行第"+(j+1)+"列"

myrow.appendChild(mytd)

}

mytbody.appendChild(myrow)

}

//创建一个表脚对象

var mytfoot=document.createElement("tfoot")

for(c=0c<1c++)

{

var myrow=document.createElement("tr")

for(d=0d<1d++)

{

var mytd=document.createElement("td")

mytd.innerHTML="脚"+(d+1)

mytd.style.cssText="text-align:center"

mytd.colSpan="10"

myrow.appendChild(mytd)

}

mytfoot.appendChild(myrow)

}

//将表头追加到表格

mytable.appendChild(mythead)

//将表体追加到表格

mytable.appendChild(mytbody)

//将表脚追加到表格

mytable.appendChild(mytfoot)

//追加对象样式

mythead.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"

mytable.style.cssText="background-color:#999border:0pxwidth:"+width+"px"

mytfoot.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"

document.body.appendChild(mytable)

}

</script>

<body>

<table id='test'>  //定义一个table

<tr>

<td></td><td></td>

</tr>

</table>

<script>

var tb = document.getElementById('test')//获取表格的dom节点

var td = tb.rows[0].cells[0]//获取0行0列的td单元格

td.innerHTML = '222'//动态修改表格的内容为222

</script>

</body>

思路：

1、获取表格的dom节点

2、通过rows和cells定位td单元格

3、通过修改innerHTML

扩展资料：

JS实现动态表格的新增，修改，删除操作

一、相关JS函数

function setParamslist() {

var tab = document.getElementById("tab")

//表格行数

var rows = tab.rows.length

//表格列数

var cells = tab.rows.item(0).cells.length

//alert("行数"+rows+"列数"+cells)

var rowData = ""

for(var i=1i<rowsi++) {

var cellsData = new Array()

for(var j=0j<cells-1j++) {

cellsData.push(tab.rows[i].cells[j].innerText)    

}

rowData = rowData + "|" + cellsData

}

document.getElementById("paramslist").value = rowData

}

//打开相关新增应用参数界面

function openAppParamsPage() {

var param = new Object()

//这个参数一定要传。

param.win = window

param.id = 100

param.name = "test"

param.birthday = new Date()

var result = window.showModalDialog("addParamsItem","dialogWidth:500pxdialogHeight:600pxdialogLeft:200pxdialogTop=200px")

//var temp = document.getElementById("paramslist").value

//document.getElementById("paramslist").value = temp + result

addSort(result)

}

// 增加应用参数函数

function addSort(data) {

var name = data

if(name == ""||name==undefined ) {

return

}

console.log(data)

var params = data.split(",")

var paramName = params[0]

var paramCode = params[1]

var paramValue = params[2]

var row = document.createElement("tr")

row.setAttribute("id", paramCode)

var cell = document.createElement("td")

cell.appendChild(document.createTextNode(paramName))

row.appendChild(cell)

cell = document.createElement("td")

cell.appendChild(document.createTextNode(paramCode))

row.appendChild(cell)

cell = document.createElement("td")

cell.appendChild(document.createTextNode(paramValue))

row.appendChild(cell)

var deleteButton = document.createElement("input")

deleteButton.setAttribute("type", "button")

deleteButton.setAttribute("value", "删除")

deleteButton.onclick = function () { deleteSort(paramCode)}

cell = document.createElement("td")

cell.appendChild(deleteButton)

row.appendChild(cell)

document.getElementById("sortList").appendChild(row)

}

// 删除应用参数函数

function deleteSort(id) {

if (id!=null){

var rowToDelete = document.getElementById(id)

var sortList = document.getElementById("sortList")

sortList.removeChild(rowToDelete)

}

}

二、弹出框页面，新增或者修改参数，并回写相关数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>新增应用</title>

<#include "/views/head.html"/>

</head>

<body>

<div class="body-box">

<div class="clear"></div>

<form >

<table width="100%" cellspacing="1" cellpadding="2" border="0" class="pn-ftable">

<tr>

<td>参数名称:</td>

<td class="pn-fcontent"><input type="text" maxlength="20" class=""  required="true"  id="paramName" name="paramName"/></td>

</tr>

<tr>

<td>参数编码:</td>

<td class="pn-fcontent"><input type="text" maxlength="20" class=""  required="true"  id="paramCode" name="paramCode" required="true" /></td>

</tr>

<tr>

<td>参数值:</td>

<td class="pn-fcontent"><input type="text" maxlength="20" class=""  required="true"  id="paramValue" name="paramValue" required="true" /></td>

</tr>

<tr>

<td align="center" colspan="4">

<input type="submit" value="保存" onclick="returnResult()"/>

<input type="button" value="返回" onclick="closeWindow()"/>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

<script type="text/javascript">

//直接关闭窗口

function closeWindow() {

window.close()

}

//获取值，组装后返回

function returnResult() {

if(!$('form').valid())

return

var paramName = document.getElementById("paramName") 

var paramCode = document.getElementById("paramCode") 

var paramValue = document.getElementById("paramValue") 

//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value)

var result = paramName.value + "," + paramCode.value + "," + paramValue.value

window.returnValue = result

window.close()

}

</script>