说明:1.选择一个白色单元格2.点击插入Button 源码如下:TestTable.html >>> 此段代码依赖于 jquery.js <<< <html> <head> <mce:style type="text/css"><!-- td.header{background-color:blue;} --></mce:style><style type="text/css" mce_bogus="1">td.header{background-color:blue;}</style> <mce:script src="./jquery.js" mce_src="jquery.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- var hidSelectedRowIndex; var hidSelectedCellIndex; $(document).ready(init); function init(){ $("td",myTab).each(function(i){ this.onclick = __onclick__; }); } function __onclick__(){ if ($(this).attr("class") == 'header'){ hidSelectedRowIndex = null; hidSelectedCellIndex = null; }else{ hidSelectedRowIndex = this.parentElement.rowIndex; hidSelectedCellIndex = this.cellIndex; } } function doInsertRow(objTable){ if (hidSelectedRowIndex != undefined){ for (j=hidSelectedRowIndex; j>-1; j--){ $("td",objTable.rows[j]).each(function(index){ var rowSpanOfTD = $(this).attr("rowSpan"); // rev1.00 //if(rowSpanOfTD > 1 // && hidSelectedRowIndex >= this.parentElement.rowIndex // && hidSelectedRowIndex <= (this.parentElement.rowIndex + rowSpanOfTD -1)){ // $(this).attr("rowSpan",rowSpanOfTD+1); //} // rev1.01 if(($(this).attr("class") == 'header' || rowSpanOfTD > 1) && hidSelectedRowIndex >= this.parentElement.rowIndex && hidSelectedRowIndex <= (this.parentElement.rowIndex + rowSpanOfTD -1)){ $(this).attr("rowSpan",rowSpanOfTD+1); } }); } var oTR = objTable.insertRow(hidSelectedRowIndex+1); var rowSpanCells = $("td",objTable.rows[hidSelectedRowIndex]).filter(function(index) { // rev1.00 //return (($(this).attr("rowSpan")) ==1); // rev1.01 return (($(this).attr("class")) != 'header'); }); var cellCount = rowSpanCells.length; for (i=0; i< cellCount; i++ ){ var oTD = rowSpanCells[i].cloneNode(true); oTD.οnclick=__onclick__; oTR.insertBefore(oTD); } } } function doInsertColumn(objTable){ if(hidSelectedCellIndex != undefined){ var cellIndexByMinimumGrain = calcCellIndexByMinimumGrain(objTable); var rowCount = objTable.rows.length; for(var k=0; k < rowCount; k++){ var actualCellIndex = calcActualCellIndex(objTable,k,cellIndexByMinimumGrain); var oTR = objTable.rows[k]; var offset_index = 0; var loopCount = Math.min(actualCellIndex,oTR.cells.length-1); for (var l=0;l <= loopCount; l++){ offset_index = offset_index + oTR.cells[l].colSpan -1; if(actualCellIndex >= l && actualCellIndex <= l+offset_index){ if(oTR.cells[l].colSpan >1){ oTR.cells[l].colSpan = oTR.cells[l].colSpan +1; }else{ var oTD = oTR.cells[l].cloneNode(true); oTD.οnclick=__onclick__; oTR.insertBefore(oTD,oTR.cells[l]); } } } } } } function calcCellIndexByMinimumGrain(objTable){ var baseCellIndexForInsert = hidSelectedCellIndex; for (var j=hidSelectedRowIndex; j>-1; j--){ $("td",objTable.rows[j]).each(function(index){ var rowSpanOfTD = $(this).attr("rowSpan"); if( rowSpanOfTD > 1 && hidSelectedRowIndex > this.parentElement.rowIndex && hidSelectedRowIndex <= (this.parentElement.rowIndex + rowSpanOfTD -1)){ baseCellIndexForInsert = baseCellIndexForInsert + 1; } if (j==hidSelectedRowIndex){ var colSpanOfTD = $(this).attr("colSpan"); if ( colSpanOfTD > 1) { baseCellIndexForInsert = baseCellIndexForInsert + colSpanOfTD - 1; } } }); } return baseCellIndexForInsert; } function calcActualCellIndex(objTable,rowIndex,cellIndex){ var baseCellIndexForInsert = cellIndex; for (var j=rowIndex; j>-1; j--){ $("td",objTable.rows[j]).each(function(index){ var rowSpanOfTD = $(this).attr("rowSpan"); if( rowSpanOfTD > 1 && rowIndex > this.parentElement.rowIndex && rowIndex <= (this.parentElement.rowIndex + rowSpanOfTD -1)){ baseCellIndexForInsert = baseCellIndexForInsert - 1; } }); } return baseCellIndexForInsert; } // --></mce:script> </head> <body> <pre> 说明: 1.选择一个白色单元格 2.点击插入Button </pre> <input type="button" value="insert row" onClick="doInsertRow(myTab)"> <input type="button" value="insert column" onClick="doInsertColumn(myTab);"> <table border="1" id="myTab"> <tr> <td class="header" >CH1</td><td class="header" >CH2</td><td class="header" >CH3</td> </tr> <tr> <td class="header" ROWSPAN="3" >RH1</td><td >11</td><td >12</td> </tr> <tr> <td >21</td><td >22</td> </tr> <tr> <td >31</td><td >32</td> </tr> <tr> <td class="header" COLSPAN="3">RH2</td> </tr> <tr> <td class="header" ROWSPAN="2" >RH3</td><td >41</td><td >42</td> </tr> <tr> <td >51</td><td >52</td> </tr> <tr> <td class="header" >RH4</td><td colSpan=2">61</td> </tr> </table> </body> </html>