当前位置: 代码迷 >> JavaScript >> JS 操作报表2
  详细解决方案

JS 操作报表2

热度:83   发布时间:2012-10-29 10:03:53.0
JS 操作表格2
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">   
<html>   
<head>   
<title> 表格操作 </title>   
<meta name="Generator" content="EditPlus">   
<meta name="Author" content="">   
<meta name="Keywords" content="">   
<meta name="Description" content="">   
</head>   
     
<body>   
     
</body>   
<script language="javascript">   
//添加表格   
 
function loadTable()   
{   
    var tb = document.createElement("table");   
    var rowTitle = tb.insertRow();   
    var cellTitle1= rowTitle.insertCell();   
    var cellTitle2= rowTitle.insertCell();   
     cellTitle2.colSpan = 2;   
     cellTitle2.align = "right";   
     cellTitle2.innerHTML = "<input type = 'button' value= '确定' onclick='addRow(this.parentElement)'>";   
     cellTitle1.innerHTML = "<span>添加</span>";   
     loadSelect(cellTitle1);   
     
    for(var i = 0; i < 10; i++){   
        var row = tb.insertRow();//添加行   
 
         loadCells(row, i);   
    }   
    //设置属性   
 
     tb.id = "tb";   
     tb.align="center";   
     tb.cellPadding = 1;   
     tb.bgColor="#ffffee";   
     tb.style.borderWidth = "1px";   
     tb.style.borderCollapse = "collapse";   
     tb.style.borderStyle = "solid";   
     tb.rules = "ALL";//应用全部   
 
     tb.borderColor = "#000000";   
    document.body.appendChild(tb);   
}   
//添加单元格   
 
function loadCells(rowObj,m)   
{   
    var cell1 = rowObj.insertCell();//添加单元格   
 
    var cell2 = rowObj.insertCell();//添加第二个单元格   
 
    var cell3 = rowObj.insertCell();   
     
     cell1.innerHTML = "&nbsp;" + parseInt(m + 1) + "&nbsp;";   
     cell2.innerHTML = "<input type='text' name='txt_name' value=''>";   
     cell3.innerHTML = "<span style='cursor:hand;' onclick='delRow(this)'>&nbsp;×&nbsp;</span>";   
}   
//添加select框   
 
function loadSelect(obj)   
{   
    var s = document.createElement("select");   
     s.id = "sel_count";   
     ss.name = s.id;   
    for(var i = 1; i <= 10; i++){   
        var opt = new Option(i+"行",i);   
         s.options.add(opt);   
    }   
     obj.appendChild(s);   
}   
//删除行   
 
function delRow(obj)   
{   
    var tr = obj.parentElement.parentElement;   
    var tb = tr.parentElement.parentElement;//table标签和tr标签隐式存在一个tbody   
 
     
     tb.deleteRow(tr.rowIndex);   
}   
//选择好的个数的行,传入单元格   
 
function addRow(obj)   
{   
    var tr = obj.parentElement;   
    var cnt = (tr.cells[0]).children[1].value;//个数   
 
    var tb = tr.parentElement.parentElement;   
     
    var lastRow = tb.rows[tb.rows.length - 1];//获得当前最后一行   
 
    var maxIndex= parseInt(lastRow.cells[0].innerText);//获得当前表格中显示的最好编号   
 
     
    for(var i = 0; i < cnt; i++){   
        var newRow = tb.insertRow();   
         loadCells(newRow,parseInt(maxIndex + i));   
    }   
          
}   
     
loadTable();   
</script>   
</html> 
  相关解决方案