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

JavaScript011

只用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在线生成表格的代码效果，通过JS功能代码，直接输入行数和列数就可以自动生成需要的表格，当然也可以扩展JS代码实现生成文字的各种形式。

<html>

<head>

<title>Js动态生成表格</title>

<style type="text/css">

table{font-size:14px}

</style>

</head>

<body >

<script language="javascript">

function tableclick(name1,name2,name3){

  Trow=name1.value

  Tcol=name2.value

  Tv=name3.value

  if ((Trow=="") || (Tcol=="") || (Tv=="")){

    alert("请将制作表格的条件填写完整")

  }

  else{

    r=parseInt(Trow)

 c=parseInt(Tcol)

 Table1(r,c,Tv)

  }

}

function tablevalue(a,ai,rows,col,str){

  int1=a.length

  for (i=0i<rows++i){

 for (j=0j<col++j){

   if ((j==0)&&(ai>=int1)){break}

   if (ai>=int1){

   str=str+"<td scope='col'> </td>"

   }

   else{

     if (j==0){

  str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>"

     }

  else{

    if (j==col-1){

      str=str+"<td scope='col'> "+(a[ai++])+"</td>"

    }

    else{

     str=str+"<td scope='col'> "+(a[ai++])+"</td>"

    }

  }

   }

 }

 str=str+"</tr>"

  }

  return str

}

function Table1(row,col,Str1){

var str=""

  a=new Array()

  s=new String(Str1)

  a=s.split("#")

  int1=a.length

  ai=0

  if (col<=int1){

   str=str+"<table width='300' border='4'>"

    for (i=0i<col++i){

   if (i==0){

    str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>"

   }

   else{

     if (i==(col-1)){

    str=str+"<th scope='col'> "+(a[ai++])+"</th></tr>"

     }

     else{

    str=str+"<th scope='col'> "+(a[ai++])+"</th>"

     }

   }

 }

    if (int1>col){

      if (row>1){

  str=tablevalue(a,ai,row-1,col,str)

   }

 }

 str=str+ "</table>"

 aa.innerHTML=str

  }

}

</script>

<form name="form1" method="post" action="">

 <p><b>行数：</b>

    <input name="name1" type="text" style="width:40px" value="4">

    <b>列数：</b>

<input name="name2" type="text" style="width:40px" value="4">

<input type="button" name="Submit3" value="生成表格" 

onClick="tableclick(document.form1.name1,document.form1.name2,document.form1.name3)"></p>

 <p><b align="top">表值：</b></p>

 <p>

    <input name="name3" wrap="VIRTUAL" style="width:520px " 

value="COL1#COL2#COL3#COL4#ROW1#A1#A2#a3#ROW2#B1#B2#B3#ROW3#C1#C2#C3">

 </p>

</form>

<div id="aa"></div>

</body>

</html>

第一步，打开HBuilder开发工具，在指定的Web项目中新建静态页面init.html，并引入Bootstrap和AngularJS相关的文件

第二步，在body元素添加ng-controller指令，并在里面添加<table></table>

第三步，在<script></script>里编写AngularJS初始化函数，并声明控制器

第四步，预览该静态页面，在浏览器查看页面效果，显示一个输入框和按钮

第五步，在控制器中添加变量model，这个变量赋值数组

第六步，在表格table循环model变量，遍历该数组并给表格赋值

注意事项

注意AngularJS动态获取表格数据

注意AngularJS动态赋值