麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

js操作table示例(個人心得)

2019-11-20 21:33:15
字體:
來源:轉載
供稿:網友
記得以前面試的時候遇到過這樣一個問題:有一個表格,然后有4個輸入框,一個合并按鈕,輸入框是這樣的,從第幾行到第幾行,從第幾列到第幾列,然后點擊按鈕,合并 。當時我從學校出來,js知識只是知道一些,根本做不到!現在想想,其實這個問題也還是考基礎功夫是否扎實!大家有興趣可以自己做做看,測下自己是不是能夠做出來。題目的截圖:
 
現在做這個問題,看起來簡單,但我還是花了很長時間,可能是我的思路不對吧?主要就是用js來操作html,我現在實現了添加行,刪除行,添加列,刪除列 ,但合并單元格卻不能完整的實現 ,主要是表格會亂掉 。現在把這個問題發出來,有興趣的同仁可以自己在有空的時候研究下,看自己能不能做出來!主要是合并單元格的問題!也可以幫我看看合并單元格的問題。

我自己實現的部分代碼:
html部分 寫道
復制代碼 代碼如下:

<body onLoad="init();">

<table id="table" align="center">
<tbody id="newbody"></tbody>

</table>
<div>
<table width="800px" border="1px" align="center">
  <tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="添加行"/></td>
    <td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="刪除行"/></td>
  </tr>
  <tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="刪除列"/></td>
    <td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="添加列"/></td>
 </tr>
 <tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="添加行"/></td></tr>
</table>
</div>
<div>
<table width="800px" border="1px" align="center">
   <tr><td>從第<input type="text" id="beginRow" name="beginRow" value=""/> 行到   <input type="text" name="endRow" id="endRow" value=""/> 行</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="合并" onClick="rebulid();"/> </td></tr>
  <tr><td>從第<input type="text" name="beginCol" id="beginCol" value=""/> 列到<input type="text" name="endCol" id="endCol" value=""/> 列</td></tr>
</table>
</div>
</body>

生成表格,采用appendChild 寫道
復制代碼 代碼如下:

function init(){
_table=document.getElementById ("table");
_table.border="1px";
_table.width="800px";

for(var i=1;i<10;i++){
  var row=document.createElement ("tr");
  row.id=i;
  for(var j=1;j<6;j++){
   var cell=document.createElement ("td");
   cell.id =i+"/"+j;
   cell.appendChild(document.createTextNode ("第"+cell.id+"列"));
   row.appendChild (cell);
  }
  document.getElementById("newbody").appendChild (row);
 }
}

添加行,使用appendChild方法 寫道
復制代碼 代碼如下:

function addRow(){
var length=document.getElementById("table").rows.length;
/*document.getElementById("newbody").insertRow(length);
  document.getElementById(length+1).setAttribute("id",length+2);*/
  var tr=document.createElement("tr");
  tr.id=length+1;
  var td=document.createElement("td");
  for(i=1;i<4;i++){
    td.id=tr.id+"/"+i;
    td.appendChild(document.createTextNode("第"+td.id+"列"));
    tr.appendChild(td);

  }
  document.getElementById("newbody").appendChild (tr);
}

添加行的另一種方法insertRow 寫道
復制代碼 代碼如下:

function addRow_withInsert(){
   varrow=document.getElementById("table").insertRow( document.getElementById("table").rows.length);
 var rowCount =document.getElementById("table").rows.length;

 var countCell=document.getElementById("table").rows.item(0).cells.length;
 for(var i=0;i<countCell;i++){
   var cell=row.insertCell(i);

   cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
   cell.id=(rowCount)+"/"+(i+1);

  }
}

刪除行,采用deleteRow(row Index) 寫道
復制代碼 代碼如下:

/*刪除行,采用deleteRow(row Index)*/
function removeRow(){
/* var row=document.getElementById("2");
  var index=row.rowIndex;
  alert(index);*/
   document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}

添加列,采用insertCell(列位置)方法 寫道
復制代碼 代碼如下:

function addCell(){
/*document.getElementById("table").rows.item(0).cells.length
用來獲得表格的列數
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
  var cell=document.getElementById("table").rows[i].insertCell(2);
  cell.innerHTML="第"+(i+1)+"/"+3+"列";

}
}

刪除列,采用deleteCell(列位置)的方法 寫道
復制代碼 代碼如下:

/*刪除列,采用deleteCell(列位置)的方法*/
function removeCell(){
  for(var i=0;i<document.getElementById("table").rows.length;i++){
    document.getElementById("table").rows[i].deleteCell(0);
  }
}

合并單元格(未實現) 寫道
我的代碼有問題,主要是表格會亂掉,一直沒有改好 :
復制代碼 代碼如下:

function rebulid(){
var beginRow=document.getElementById("beginRow").value;/*開始行*/
var endRow=document.getElementById("endRow").value;/*結束行*/

var beginCol=document.getElementById("beginCol").value;/*開始列*/
var endCol=document.getElementById("endCol").value;/*結束列*/

var tempCol=beginRow+"/"+beginCol;/*定位要改變屬性的列*/
alert(tempCol);
var td=document.getElementById(tempCol);

/*刪除要合并的單元格*/
for(var x=beginRow;x<=endRow;x++){
  for(var i=beginCol;i<=endCol;i++){
    if(x==beginRow){

      document.getElementById("table").rows[x].deleteCell(i+1);

    }
    else{

      document.getElementById("table").rows[x].deleteCell(i);

    }

   }
  }
   td.rowSpan=(endRow-beginRow)+1;
}
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 成人精品视频在线 | 在线看免费观看av | 手机av在线电影 | 91午夜免费视频 | 国产一区二区三区四区五区加勒比 | 斗罗破苍穹在线观看免费完整观看 | 欧美性色黄大片www 操碰网 | 免费看a级片 | 精品无吗乱吗av国产爱色 | 黄色免费av网站 | 久久国产一二区 | 久草在线视频福利 | 日本娇小videos高潮 | 视频一区二区三区中文字幕 | 国产精品剧情一区二区三区 | 久久大陆| 成人黄色小视频在线观看 | h视频在线免费观看 | 成人毛片免费视频 | 国产乱淫av片免费 | 久久久久一本一区二区青青蜜月 | 草草在线观看 | 欧美a视频 | 韩国精品视频在线观看 | 爱高潮www亚洲精品 欧美黄色一级片视频 | 久久999久久 | 伊人在线视频 | 免费久久久久久久 | 国产一级免费不卡 | 一级做a爱片毛片免费 | 一级黄色毛片免费 | 视频一区二区三区在线播放 | sesee99| 婷婷亚洲一区二区三区 | a级高清免费毛片av在线 | 久色免费| 成人h视频在线 | 国产精品亚洲精品日韩已方 | 一级免费特黄视频 | 蜜桃网在线观看 | 亚洲成人第一区 |