<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    小菜毛毛技術分享

    與大家共同成長

      BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
      164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks
     記得以前面試的時候遇到過這樣一個問題:有一個表格,然后有4個輸入框,一個合并 按鈕,輸入框是這樣的,從第幾行到第幾行,從第幾列到第幾列,然后點擊按鈕,合并 。當時我從學校出來,js知識只是知道一些,根本做不到!現在想想,其實這個問題也還是考基礎功夫是否扎實!大家有興趣可以自己做做看,測下自己是不是能夠做出來。題目的截圖:

     

    第1/1列 第1/2列 第1/3列 第1/4列 第1/5列
    第2/1列 第2/2列 第2/3列 第2/4列 第2/5列
    第3/1列 第3/2列 第3/3列 第3/4列 第3/5列
    第4/1列 第4/2列 第4/3列 第4/4列 第4/5列
    第5/1列 第5/2列 第5/3列 第5/4列 第5/5列
    第6/1列 第6/2列 第6/3列 第6/4列 第6/5列
    第7/1列 第7/2列 第7/3列 第7/4列 第7/5列
    第8/1列 第8/2列 第8/3列 第8/4列 第8/5列
    第9/1列 第9/2列 第9/3列 第9/4列 第9/5列
    從第 行到

    從第 列到

     

         現在做這個問題,看起來簡單,但我還是花了很長時間,可能是我的思路不對吧?主要就是用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;
    }
     
    posted on 2009-06-04 09:45 小菜毛毛 閱讀(43617) 評論(4)  編輯  收藏 所屬分類: HTML+div+css實踐

    Feedback

    # re: js操作html的table,包括添加行,添加列,刪除行,刪除列 2011-12-23 10:43 superchangme
    function merge(){
    var beginRow=document.getElementById("beginRow");
    var endRow=document.getElementById("endRow");
    var beginCol=document.getElementById("beginCol");
    var endCol=document.getElementById("endCol");
    var inputobj=new Array(beginRow,endRow,beginCol,endCol);
    var rowspan=endRow.value-beginRow.value+1;
    var colspan=endCol.value-beginCol.value+1;
    if(beginRow.value!=''&&endRow.value!=''&&beginCol.value!=''&&endCol.value!=''){
    for(i=endRow.value;i>beginRow.value-1;i--){
    for(j=endCol.value;j>beginCol.value-1;j--){
    if(i==beginRow.value&&j==beginCol.value){}
    else{
    var row=i;
    var col=j-1;
    var obj=document.getElementById(row);
    if(obj)obj.deleteCell(col);

    }
    }
    }
    var obj=document.getElementById(beginRow.value+"/"+beginCol.value);
    obj.setAttribute("rowspan",rowspan);
    obj.setAttribute("colspan",colspan);
    }else{
    var i=0;
    while(i<inputobj.length){
    if(inputobj[i].value==''){
    inputobj[i].focus();
    beark;
    }else{
    i++;
    }
    }

    }
    }  回復  更多評論
      

    # re: js操作html的table,包括添加行,添加列,刪除行,刪除列 2011-12-23 17:53 superchangme
    /**改進版,之前的不能合并有跨越項的**/
    function merge(){
    var beginRow=document.getElementById("beginRow");
    var endRow=document.getElementById("endRow");
    var beginCol=document.getElementById("beginCol");
    var endCol=document.getElementById("endCol");
    var inputobj=new Array(beginRow,endRow,beginCol,endCol);
    var rowspan=endRow.value-beginRow.value+1;
    var colspan=endCol.value-beginCol.value+1;
    if(beginRow.value!=''&&endRow.value!=''&&beginCol.value!=''&&endCol.value!=''){
    for(i=endRow.value;i>beginRow.value-1;i--){
    for(j=endCol.value;j>beginCol.value-1;j--){
    if(i==beginRow.value&&j==beginCol.value){}
    else{
    var row=i;
    var col=j-1;
    if(document.getElementById(i+"/"+j)!=null){
    var obj=document.getElementById(i+"/"+j);
    obj.parentNode.removeChild(obj);
    }
    }
    }
    }
    var obj=document.getElementById(beginRow.value+"/"+beginCol.value);
    obj.setAttribute("rowspan",rowspan);
    obj.setAttribute("colspan",colspan);
    }else{
    var i=0;
    while(i<inputobj.length){
    if(inputobj[i].value==''){
    inputobj[i].focus();
    beark;
    }else{
    i++;
    }
    }
    }
    }   回復  更多評論
      

    # re: js操作html的table,包括添加行,添加列,刪除行,刪除列 2013-09-05 16:50 合并
    obj.setAttribute("rowspan",rowspan); 要大寫
    obj.setAttribute("rowSpan",rowspan);

      回復  更多評論
      

    # re: js操作html的table,包括添加行,添加列,刪除行,刪除列 2015-10-29 09:51 菊花菊花姐
    共和國分隔符  回復  更多評論
      

    主站蜘蛛池模板: 韩日电影在线播放免费版| 无忧传媒视频免费观看入口| a级毛片在线免费| 国产精品亚洲产品一区二区三区 | 中文字幕在线观看亚洲视频| 免费无码一区二区三区| 亚洲三级电影网址| 91香蕉在线观看免费高清| 亚洲综合在线成人一区| 男女超爽刺激视频免费播放| 亚洲一级特黄特黄的大片| 免费看美女被靠到爽的视频| 国产亚洲一卡2卡3卡4卡新区 | 51在线视频免费观看视频| 亚洲精品亚洲人成在线麻豆| 免费观看的毛片大全| 亚洲av无码一区二区三区四区 | 久久久久亚洲国产AV麻豆| 免费乱理伦在线播放| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 亚洲噜噜噜噜噜影院在线播放| 99在线精品免费视频九九视| 在线亚洲午夜片AV大片| 国产jizzjizz视频全部免费| ssswww日本免费网站片| 亚洲av午夜福利精品一区人妖| 亚洲黄色免费电影| 亚洲乱色伦图片区小说 | 日本人护士免费xxxx视频| jyzzjyzz国产免费观看| 亚洲精品在线观看视频| 四虎成人免费观看在线网址 | 亚洲熟妇AV一区二区三区宅男| 免费人成无码大片在线观看| 四虎影视无码永久免费| 亚洲专区中文字幕| 亚洲高清最新av网站| 69视频在线观看免费| 国产亚洲欧美日韩亚洲中文色| 亚洲日韩欧洲乱码AV夜夜摸| 四虎在线最新永久免费|