JavaScript中操作表格

最新推荐文章于 2024-08-16 11:39:58 发布

彼岸花2015

最新推荐文章于 2024-08-16 11:39:58 发布

阅读量389

点赞数 1

本文链接：https://blog.csdn.net/xioawangba/article/details/50829280

版权

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

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

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

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

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

(1)自动的添加行

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

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

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

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" οnclick="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)


    }