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

[HTML]HTML5实现可编辑表格

2016-06-29 17:09 513 查看

HTML5实现的简单的可编辑表格

[HTML]代码

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>可编辑表格</title>
<script>
function addRow(){
var oTable = document.getElementById("oTable");
var tBodies = oTable.tBodies;
var tbody = tBodies[0];
var tr = tbody.insertRow(tbody.rows.length);
var td_1 = tr.insertCell(0);
td_1.innerHTML = "<div contenteditable='true'>第1列</div>";
var td_2 = tr.insertCell(1);
td_2.innerHTML = "<div contenteditable='true'>第2列</div>";
}

</script>
</head>
<body>
<fieldset>
<legend>可编辑的表格</legend>
<table id="oTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0" cellpadding="2" width="100%">
<thead>
<tr>
<th>第一列标题</th>
<th>第二列标题</th>
</tr>
</thead>
<tbody>
<tr>
<td><div contenteditable="true">第一行第一列</div></td>
<td><div contenteditable="true">第一行第二列</div></td>
</tr>
</tbody>
</table>
</fieldset>
<input type="button" onClick="addRow();" style="font-size:16px;" value="+"/>
</body>
</html>

[HTML]代码

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>可编辑表格</title>
<script>
function addRow(){
var oTable = document.getElementById("oTable");
var tBodies = oTable.tBodies;
var tbody = tBodies[0];
var tr = tbody.insertRow(tbody.rows.length);
var td_1 = tr.insertCell(0);
td_1.innerHTML = "<div contenteditable='true'>第1列</div>";
var td_2 = tr.insertCell(1);
td_2.innerHTML = "<div contenteditable='true'>第2列</div>";
}

</script>
</head>
<body>
<fieldset>
<legend>可编辑的表格</legend>
<table id="oTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0" cellpadding="2" width="100%">
<thead>
<tr>
<th>第一列标题</th>
<th>第二列标题</th>
</tr>
</thead>
<tbody>
<tr>
<td><div contenteditable="true">第一行第一列</div></td>
<td><div contenteditable="true">第一行第二列</div></td>
</tr>
</tbody>
</table>
</fieldset>
<input type="button" onClick="addRow();" style="font-size:16px;" value="+"/>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航