html可编辑的表格

DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>可编辑表格title>
<style>
table.wTable {
	margin-top:15px;
	border-collapse:collapse;
	border:1px solid #aaa;
	width:100%;
}
table.wTable th {
	vertical-align:baseline;
	padding:5px 15px 5px 6px;
	background-color:#3F3F3F;
	border:1px solid #3F3F3F;
	text-align:left;
	color:#fff;
}
table.wTable td {
	vertical-align:text-top;
	padding:6px 15px 6px 6px;
	border:1px solid #aaa;
}
table.wTable tr:nth-child(odd) {
	background-color:#F5F5F5;
}
table.wTable tr:nth-child(even) {
	background-color:#fff;
}
style>
<script>
function addRow(){
    var wTable = document.getElementById("wTable");
    var tBodies = wTable.tBodies;
    var tbody = tBodies[0];
    var tr = tbody.insertRow(tbody.rows.length);
    var td_1 = tr.insertCell(0);
    td_1.innerHTML = "
第1列
"
; var td_2 = tr.insertCell(1); td_2.innerHTML = "
第2列
"
; var td_3 = tr.insertCell(2); td_3.innerHTML = "
第3列
"
; }
script> head> <body> <fieldset> <legend>可编辑的表格legend> <table class="wTable" id="wTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0" cellpadding="2" width="100%"> <thead> <tr> <th>第一列标题th> <th>第二列标题th> <th>第三列标题th> tr> thead> <tbody> <tr> <td><div contenteditable="true">第一行第一列div>td> <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>

你可能感兴趣的:(js,JQ,html,html,html5,css)