Охватывающие ячейки таблицы автоматически между одинаковым значением ячейки


Пожалуйста, просмотрите мой код JavaScript ниже. Я хочу colspan и автоматически атрибутов rowspan если соседние ячейки имеют ценность точно такая же. Например, как этот.

<table id="BeforeTable" border="1">
    <tr><td>A</td><td>B</td><td>B</td><td>C</td><td>D</td></tr>
    <tr><td>E</td><td>F</td><td>G</td><td>C</td><td>D</td></tr>
</table>
<br>
<table id="AfterTable" border="1">
    <tr><td>A</td><td colspan="2">B</td><td rowspan="2">C</td><td rowspan="2">D</td></tr>
    <tr><td>E</td><td>F</td><td>G</td></tr>
</table>

Я уже закончено, но я чувствую, что это не сложные и я хочу знать более лучший способ решить эту проблему. Не могли бы вы посмотреть мой код ниже и дайте мне какие-либо предложения. (или если есть какие-либо решения об этом, например, библиотеки JavaScript, пожалуйста, дайте мне знать.)

<table id="BeforeTable" border="1">
    <tr><td>A</td><td>B</td><td>B</td><td>C</td><td>D</td></tr>
    <tr><td>E</td><td>F</td><td>G</td><td>C</td><td>D</td></tr>
</table>
<br>

<script type="text/javascript">
$(document).ready(function(){
    doColSpan();
    doRowSpan();
    deleteCellsByCol();
    deleteCellsByRow();
});
function doColSpan(){
    var colSpanCount = 1;
    var tObj=document.getElementById("BeforeTable");
    for(var i=0; i<tObj.rows.length; i++){
        if(tObj.rows[i]!=null){
            for(var j in tObj.rows[i].cells){
                if(tObj.rows[i].cells[j].innerHTML){
                    if(colSpanCount > 1){
                        colSpanCount--;
                        continue;
                    }
                    colSpanCount = getColSpanCount(tObj, i, j);
                    if(colSpanCount > 1){
                        tObj.rows[i].cells[j].colSpan = colSpanCount;
                    }
                }
            }
        }
    }
}
function getColSpanCount(tObj, i, j){
    colSpanCount = 1;
    nextX = parseInt(j);
    while(true){
        nextX++;
        if(isEqualToNextRightCell(tObj, i, j, nextX)){
            colSpanCount++;
            continue;
        }else{
            break;
        }
    }
    return colSpanCount;
}
function isEqualToNextRightCell(tObj, i, j, nextX){
    return tObj.rows[i].cells[nextX] && tObj.rows[i].cells[j].innerHTML == tObj.rows[i].cells[nextX].innerHTML
}
function doRowSpan(){
    var tObj=document.getElementById("BeforeTable");
    for(var i=0; i<tObj.rows.length; i++){
        if(tObj.rows[i]!=null){
            for(var j in tObj.rows[i].cells){
                if(tObj.rows[i].cells[j].innerHTML){
                    rowSpanCount = getRowSpanCount(tObj, i, j);
                    if(rowSpanCount > 1){
                        tObj.rows[i].cells[j].rowSpan = rowSpanCount;
                    }
                }
            }
        }
    }
}
function getRowSpanCount(tObj, i, j){
    rowSpanCount = 1;
    nextY = parseInt(i);
    while(true){
        nextY++;
        if(isEqualToNextUnderCell(tObj, i, j, nextY)){
            rowSpanCount++;
            continue;
        }else{
            break;
        }
    }
    return rowSpanCount;
}
function isEqualToNextUnderCell(tObj, i, j, nextY){
    return tObj.rows[nextY] && tObj.rows[nextY].cells[j] && tObj.rows[i].cells[j].innerHTML == tObj.rows[nextY].cells[j].innerHTML
}
function deleteCellsByCol(){
    var s="";
    var tObj=document.getElementById("BeforeTable");
    for(var i=0; i<tObj.rows.length; i++){
        if(tObj.rows[i]!=null){
            for(var j in tObj.rows[i].cells){
                if(tObj.rows[i].cells[j].innerHTML){
                    for(var k = 1; k < tObj.rows[i].cells[j].colSpan; k++){
                        tObj.rows[i].deleteCell(parseInt(j) + 1);
                    }
                }
            }
        }
    }
}
function deleteCellsByRow(){
    var deletedCount = 0;
    var tObj=document.getElementById("BeforeTable");
    for(var i=0; i<tObj.rows.length; i++){
        if(tObj.rows[parseInt(i)+1]){
            for(var j in tObj.rows[i].cells){
                rowSpanCount = tObj.rows[i].cells[j].rowSpan;
                if(rowSpanCount > 1){
                    for(var k in tObj.rows[parseInt(i)+1].cells){
                        if(tObj.rows[i].cells[j].innerHTML == tObj.rows[parseInt(i)+1].cells[k].innerHTML){
                            tObj.rows[parseInt(i)+1].deleteCell(k);
                        }
                    }
                }
            }
        }
    }
}

</script>


6744
3
задан 28 ноября 2011 в 03:11 Источник Поделиться
Комментарии
1 ответ


  1. Я не вижу причин, почему эти функции должны быть в глобальной области видимости. Самый простой исправить это, чтобы положить все свои функции с $(Документ).готово.

  2. isEqualToNextRightCell: использовать идентификатор операции для сравнения, если вы абсолютно уверены, что вы хотите, тип преобразование выполняется автоматически в сравнение. Вы забыли точку с запятой. Ссылка

    function isEqualToNextRightCell(tObj, i, j, nextX){
    return tObj.rows[i].cells[nextX] &&
    tObj.rows[i].cells[j].innerHTML === tObj.rows[i].cells[nextX].innerHTML;
    }

  3. getColSpanCount: объявлять переменные, или они будут глобальными. Также, вы можете затянуть это немного на Земле, если в вашей время:

    function getColSpanCount(tObj, i, j) {
    var colSpanCount = 1,
    nextX = parseInt(j, 10);
    while (isEqualToNextRightCell(tObj, i, j, ++nextX)) {
    colSpanCount++;
    }
    return colSpanCount;
    }

  4. doColSpan: вы сделаете незначительные, но все слишком общими JS ошибка здесь путем ссылок на массив.длина непосредственно в цикле for. Когда это возможно, хранить только длина и утилизировать его. Вы также можете улучшить читабельность и производительность, сохраняя элементы массива в цикле. Кроме того, вы относитесь к своим массивы непоследовательно. tObj.строки цикл по сравнению с использованием старого стиля синтаксис. tObj.строки[я].клетки можно перебрать, используя для ... в синтаксисе, это здорово, но не реализован везде еще. Вот как бы я написал это:

    function doColSpan() {
    var colSpanCount = 1,
    tObj = document.getElementById("BeforeTable"),
    i = tObj.rows.length,
    j,
    numCells,
    row,
    cell;
    while (i-- > 0) {
    row = tObj.rows[i];
    if (row) {
    j = 0;
    numCells = row.cells.length;
    while (j < numCells) {
    cell = row.cells[j];
    if (cell.innerHTML) {
    if (colSpanCount > 1) {
    colSpanCount--;
    continue;
    }
    colSpanCount = getColSpanCount(tObj, i, j);
    if (colSpanCount > 1) {
    cell.colSpan = colSpanCount;
    }
    }
    }
    }
    }
    }

Остальной код как и выше, поэтому я не стану повторять его. Если вы примените эти принципы в коде это должно помочь. Не забудьте использовать анализатор кода , чтобы помочь отсеять легко исправить вещи.

1
ответ дан 29 ноября 2011 в 03:11 Источник Поделиться