`
liss
  • 浏览: 825232 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js操作表格

JavaScriptPHPHTML.netBlog 
阅读更多 
<!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"; 
     s.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>

 

http://blog.chinaunix.net/u1/57965/showart.php?id=688399

分享到：
| textarea元素高度自适应函数+运行效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics