小菜毛毛技術分享

          與大家共同成長

            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 小菜毛毛 閱讀(43616) 評論(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 菊花菊花姐
          共和國分隔符  回復  更多評論
            

          主站蜘蛛池模板: 花莲市| 垫江县| 酒泉市| 新竹市| 荔波县| 年辖:市辖区| 西宁市| 同江市| 巴东县| 长岭县| 凤阳县| 海宁市| 资中县| 汶川县| 清涧县| 合阳县| 江华| 罗甸县| 大兴区| 神木县| 天全县| 桑植县| 章丘市| 泰州市| 翼城县| 彰化市| 本溪| 来凤县| 呼伦贝尔市| 庆城县| 嘉祥县| 冀州市| 红原县| 灵石县| 扶绥县| 宕昌县| 山西省| 民县| 大英县| 油尖旺区| 正蓝旗|