HTML5实现可编辑表格

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

标签更多>>

word左右居中纵向分布 word左右居中对齐 word左右居中对齐怎么设置 word标题回车后为正文 word标题回车后直接分页 word标题回车后中间空了好大一段 word里面行距怎么调整无法缩小 word里面行距一直很大 word里面行距怎么设置在哪里 word试卷格式文档怎么打印 word试卷格式排版 word中隐藏文字打印 word中隐藏文字快捷键 word中隐藏文字在哪里

专题更多>>

最新文章更多>>

我决定把以前的ID换了

HTML5实现可编辑表格

<!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"  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();"  value="+"/>
</body>
</html>