自己做的一个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>

功能完善中，请大家批评指正；

posted @ 2006-08-29 17:09 晓岚阅读(940) 评论(0) 编辑收藏举报

刷新页面返回顶部

蔚蓝天空

自己做的一个Editable table

公告