只用js如何实现表格内容的动态修改？

JavaScript020

只用js如何实现表格内容的动态修改？,第1张

<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>

用js获取表格元素,行元素tr或者列元素td,进行css样式设置即可

<table><tr><td></td></tr></table>

<script type="text/javascript" scr="jquery.js">

    

    $('tr').css('border','solid 1px purple')

    $('td').css('border-collapse','collapse')

    $('td').css('padding','10px')

</script>

//以上方法是jquery方式实现获得和样式修改

//其中css和attr中参数可变,一个参数时意为获取,两个参数为设置

//设置样式也可给元素添加属性用attr

//或者addClass都可以,添加class属性等

<table name ="table1" width="285" border="1" cellspacing="0" cellpadding="0">

<tr>

<td width="109">数量</td>

<td width="41">单价</td>

<td width="91">金额</td>

</tr>

<tr>

<td name1="td11" onchange="sum()">10</td>

<td name1="td12"onchange="sum()">2</td>

<td name1="td13"onchange="sum()">20</td>

</tr>

<tr>

<td name1="td21"onchange="sum()">15</td>

<td name1="td22"onchange="sum()">3</td>

<td name1="td23"onchange="sum()">45</td>

</tr>

..

..

..

<tr>

<td name1="total1">合计数量：</td>

<td name1="total2" colspan="2">合计金额：</td>

</tr>

</table>

<script>

function sum()

{

var obj = document.getElementById("table1")

var length = obj.rows.length

var sum1 =0

var sum2 =0

for(int i=1i<length-1 i++)

{

sum1 =parseFloat(sum1) + parseFloat(document.getElementById ("td"+i+""+1).value)

sum2 =parseFloat(sum2) + parseFloat(document.getElementById ("td"+i+""+3).value)

}

document.getElementById ("total1").value = sum1

document.getElementById ("total2").value = sum2

}

</script>