您的位置：首页 > Web前端 > JavaScript

JavaScript中操作表格

2016-03-08 17:57 218 查看

在写页面的时候，我们和表格打交道的次数比较不，下面我来介绍一下JavaScript怎样操作表格的。

在JavaScript可以使用document.getElementById("")等方法得到表格中的内容，但是JavaScript中有专门的对表格的操作

其中cells[]方法可以得到所有单元格的数组，得到指定单元格中的内容我们首先获得他所在的行数,比如是第二行的第二个单元格

var table=document.getElementById("table").row[1]//得到第二行

table[0].innerHTML//得到第二行的第二列中的单元格的内容

(1)自动的添加行

在JavaScript中有专门的方法实现插入的操作。

insertRow() 方法用于在表格中的指定位置插入一个新行。

在插入的时候，要指定对应的位置，如下：

<script type="text/javascript">

function insRow()

{

var x=document.getElementById('myTable').insertRow(0);//将新增的行出插在第一行之前，就是显示在首行

var y=x.insertCell(0);//获得第一行的第一个列

var z=x.insertCell(1)//获得第一行的第二列

y.innerHTML="NEW CELL1"//插入的数据

z.innerHTML="NEW CELL2"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="insRow()" value="插入行">

也可以使用另一种方式操作页面上的表格，动态的改变页面上的值

function  toaddShop(good , val,unit){
var tempid = document.getElementById("HiddenShop").value.split(',');
for (var i = 0; i < tempid.length - 1; i++) {
if (val == tempid[i].toString()) {
alert("商品不能重复！");
return;
}
}
document.getElementById("HiddenShop").value += val + ","
var oTab = document.getElementById('toSellTab');
var oTr = document.createElement('tr');

var oTd = document.createElement('td');
oTd.innerHTML ='<input type="text"  style="width: 10%;" name="toName" value="'+good+'">';

oTr.appendChild(oTd);

var oTd = document.createElement('td');
oTd.innerHTML = '数量：<input type="text" style="width: 30%;" name="ToNumber" value="1" class="ToNumber">';//添加售价
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '价格：<input type="text" style="width: 30%;" name="toPrice" value="1" class="toPrice">';//添加售价
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '规格：<input type="text" style="width: 30%;" name="toUnit" value="'+unit+'" class="toUnit">';//添加售价
oTr.appendChild(oTd);

var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javascript:;">删除</a>';//添加删除的功能
oTr.appendChild(oTd);

oTab.appendChild(oTr);

oTd.getElementsByTagName('a')[0].onclick = function () {
oTab.tBodies[0].removeChild(this.parentNode.parentNode)

}

其中方法中的参数中在要传进来的显示在表格中的数据的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航