Home > Article > Web Front-end > JS实现向表格中动态添加行的方法_javascript技巧

JS实现向表格中动态添加行的方法_javascript技巧

WBOYOriginal: 2016-05-16 16:06:591133browse

本文实例讲述了JS实现向表格中动态添加行的方法。分享给大家供大家参考。具体分析如下：

下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行

<!DOCTYPE html>
<html>
<head>
<script>
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="Insert row">
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery制作可自定义大小的拼图游戏_jqueryNext article：jQuery使用hide方法隐藏页面上指定元素的方法_jquery

See more

JS实现向表格中动态添加行的方法_javascript技巧

Related articles