自己做的一个Editable table
自己做的一个可编辑的table
主要功能：
1.用CSS写的衬托，圆角表格
2.添加一行
3.删除一行
4.添加特定位置的行，删除特定位置的行
5.编辑行
6.选中行变色
7.漂亮的按钮风格
预览界面：
CSS:
1<style type="text/css">
2body{}{padding: 20px;background-color: #FFF;
3 font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
4h1,h2,p{}{margin: 0 10px}
5h1{}{font-size: 250%;color: #FFF}
6h2{}{font-size: 200%;color: #f0f0f0}
7p{}{padding-bottom:1em}
8h2{}{padding-top: 0.3em}
9div#nifty{}{ margin: 0 10%;background: #9BD1FA; width:800px}
10
11b.rtop, b.rbottom{}{display:block;background: #FFF}
12b.rtop b, b.rbottom b{}{display:block;height: 1px;
13 overflow: hidden; background: #9BD1FA}
14b.r1{}{margin: 0 5px}
15b.r2{}{margin: 0 3px}
16b.r3{}{margin: 0 2px}
17b.rtop b.r4, b.rbottom b.r4{}{margin: 0 1px;height: 2px}
18#content
19{}{
20padding:5px;
21}
22#contenttop
23{}{
24margin:5px;
25border-bottom:dashed 1px;
26}
27.btn {}{
28 BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
29}
30.btn1_mouseout {}{
31 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
32}
33.btn1_mouseover {}{
34 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
35}
36</style>
<script language="javascript">
var flag ;
var rowIndex = -1;
var tablename = document.getElementById("tbcontent");
var tds = tablename.rows[0].cells.length;
function addRow()
{
var tablename = document.getElementById("tbcontent");
var tds = tablename.rows[0].cells.length;
var newRow = tablename.insertRow(rowIndex);
newRow.height = "20px";
//alert(newRow.length);
//alert(newRow.rowIndex)
var cell = newRow.insertCell(0);
cell.align = "center";
newRow.cells(0).innerHTML = "<img src=\"arrow.gif\" onClick='changeBG()'>";
cell = newRow.insertCell(1);
cell.innerHTML= "<input name=\"textfield\" type=\"text\" style=\"width:100%; background-color:#FFFFEF\">";
cell = newRow.insertCell(2);
cell.innerHTML= "<input name=\"textfield\" type=\"text\" size=\"20\">";
cell = newRow.insertCell(3);
cell.innerHTML= "<input name=\"textfield\" type=\"text\" size=\"12\">";
cell = newRow.insertCell(4);
cell.innerHTML= "<input type=\"text\" name=\"textfield\">";
cell = newRow.insertCell(5);
cell.innerHTML= "<input name=\"textfield\" type=\"text\" size=\"10\">";
}
function deleteRow()
{
var tablename = document.getElementById("tbcontent");
var tds = tablename.rows[0].cells.length;
tablename.deleteRow(rowIndex);
alert(rowIndex);
}
function changeBG()
{
//alert("ddd");
var src = window.event.srcElement;
var pa = src.parentElement.parentElement;
rowIndex = pa.rowIndex;
//alert(pa.tagName);
if (flag == 0)
{
//alert("hh");
pa.bgColor = "#ffffff";
flag = 1;
}
else
{
pa.bgColor = "#A0A0A4";
//pa.childNodes[3].bgColor ="#A0A0A4";
flag = 0;
}
//pa.bgcolor = "#A0A0A4";
}
function next()
{
var tablename = document.getElementById("tbcontent");
var cell = tablename.rows[1].cells[1];
alert(cell.children[0].value);
}
</script>
HTML:
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div id="contenttop"><IMG height=10
src="dotdb.gif" width=10><STRONG> <FONT
color=#043b9c>教育背景：
<input name="Submit" type="button" class="btn" onClick="addRow();" value=" + ">
<input name="Submit" type="button" class="btn" onClick="deleteRow()" value=" - ">
</FONT></STRONG></div>
<div id="content"><TABLE id="tbcontent" width="700" border="1" align="center" cellPadding=3 cellSpacing=0 bordercolor="#A0A0A4"
borderColorDark=#ffffff bgcolor="#FFFFFF" class=54master>
<TBODY>
<TBODY>
<TR bgcolor="#A0A0A4">
<TD width="10%" valign="top"> </TD>
<TD width="26%" valign="top"><div align="center">起止时间</div></TD>
<TD width="21%" valign="top">
<div align="center">学校名称 </div></TD>
<TD width="13%"><div align="center">所获学位</div></TD>
<TD width="25%"><div align="center">所学专业</div></TD>
<TD width="11%"><div align="center">证明人</div></TD>
<TD width="26%" valign="top" style=" display:none">1</TD>
</TR>
<TR>
<TD align="center"><img src="arrow.gif" onClick="changeBG()"></TD>
<TD><input name="textfield" type="text" size="20"></TD>
<TD><input name="textfield" type="text" size="20"></TD>
<TD><input name="textfield" type="text" size="12"></TD>
<TD><input type="text" name="textfield"></TD>
<TD><input name="textfield" type="text" size="10"></TD>
<TD style=" display:none">2</TD>
</TR>
<!-- onMouseOver="javascript:this.bgColor ='#A0A0A4' " onMouseOut="javascript:this.bgColor='#ffffff'" -->
<TR >
<TD align="center"><img src="arrow.gif" onClick="changeBG()"></TD>
<TD><input name="textfield" type="text" size="20"></TD>
<TD><input name="textfield" type="text" size="20"></TD>
<TD><input name="textfield" type="text" size="12"></TD>
<TD><input type="text" name="textfield"></TD>
<TD><input name="textfield" type="text" size="10"></TD>
<TD style=" display:none">3</TD>
</TR>
</table>
</div>
<div style=" border-top:1px dashed; height:40px; padding:10px 0px 15px 20px">
<table width="777" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="503"> </td>
<td width="159"><input class="btn" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn'" type="submit" name="Submit" value="上一步"></td>
<td width="115"><input class="btn" onClick="next()" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn'" type="submit" name="Submit" value="下一步"></td>
</tr>
</table>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
功能完善中，请大家批评指正；
