Unire la parità di celle di tabella con jQuery

Semplice tabella html con NxM valori.
L’obiettivo è quello di unire la parità di celle in colonna con jQuery.
Nota di, che in una riga non ci sono duplicati.

Ho avuto come nascondere la parità di cellule, ma c’è un modo per combinare una cella con i dati con una cella vuota?

html:

<table border="1" id="testTable">
<tr>
    <td>First</td>
    <td>A</td>
    <td>A</td>
</tr>
<tr>
    <td>First</td>
    <td>A</td>
    <td>B</td>
</tr>
<tr>
    <td>Second</td>
    <td>V</td>
    <td>S</td>
</tr>
<tr>
    <td>Third</td>
    <td>D</td>
    <td>H</td>
</tr>
<tr>
    <td>Third</td>
    <td>E</td>
    <td>E</td>       
</tr>
</table>

js:

var seenArray = {};
$('#testTable td').each(function() 
{
    var index =  $(this).index();
    var txt = $(this).text();
    if (seenArray[index] === txt) 
    {
        $(this).text(''); //I think here should be "marging"
    }
    else 
    {
        seenArray[index] = txt;
    }
});

jsFiddle

P. S. Una cosa di più, i dati originariamente recuperati nell’array json, quindi faccio .parseJSON() primo e inserire i dati in tabella utilizzando:

for (var i = 0; i < obj.length; i++) 
{
    tr = $('<tr/>');
    tr.append("<td>" + obj[i]['columnA'] + "</td>");
    tr.append("<td>" + obj[i]['columnB'] + "</td>");
    tr.append("<td>" + obj[i]['columnC'] + "</td>");
    $('#testTable').append(tr); 
}

UPD

alFReD NSH fatto una buona soluzione per 2 celle. Qui è la sua soluzione.
Ma, se ci saranno più di 2 è uguale a celle.

Così qui “Prima” e “A” deve essere una cella?
“Prima” e cella vuota sotto di esso devono essere unite. Si prega di controllare il jsfiddle

InformationsquelleAutor Aleksey Potapov | 2014-02-02

5 risposte

  1. 9

    Se ottengo quello che intendi, questa la mia versione modificata: http://jsfiddle.net/djhU7/4/

    Così, invece di $(this).text('') ho fatto questo:

        $($this.parent().prev().children()[index]).attr('rowspan', 2);
        $this.hide();

    Quello che ho fatto, è stata la ho impostato il rowspan della prima cella a 2. Questo attributo “indica per quante righe la cella si estende.” che farà il suddetto cell due volte più grande, e ho nascosto il cellulare con le informazioni duplicate in modo che il supplemento cella andrà via. Si noti che la rimozione della cella rovina l’indice di controllo per la cella successiva. Questa era solo una breve e veloce soluzione, ma rowspan attributo deve essere utilizzato da qualche parte per raggiungerlo.

    Ecco un’altra versione, che imposta rowspan al momento di inserire le celle nella tabella, oltre al fatto che funziona con 3 cellule duplicati e di più, è anche più veloce, in quanto si evita di eseguire nuovamente il rendering della tabella(anche se può essere ottimizzato di più, ma non credo che in questo momento si vuole preoccupare, ottimizzazione prematura è la radice di tutti i mali!): http://jsfiddle.net/g7uY9/1/

    for (var i = 0; i < obj.length; i++) {
    
    
       tr = $('<tr/>');
    
        addColumn(tr, 'columnA', i);
        addColumn(tr, 'columnB', i);
        addColumn(tr, 'columnC', i);
        $('#testTable').append(tr);
    
    }
    
    function addColumn(tr, column, i) {
        var row = obj[i],
            prevRow = obj[i - 1],
            td = $('<td>' + row[column] + '</td>');
        if (prevRow && row[column] === prevRow[column]) {
            td.hide();
        } else {
            var rowspan = 1;
            for (var j = i; j < obj.length - 1; j++) {
                if (obj[j][column] === obj[j + 1][column]) {
                    rowspan++;
                } else {
                    break;
                }
            }
            td.attr('rowspan', rowspan);
        }
    
        tr.append(td);
    }
    Avete capito bene. Grazie, compagno.
    C’era un bug, in cui la seconda cellule non per unire, io appena risolto utilizzando hide invece di remove.
    sì, ho notato, che.
    Si potrebbe iniziare dall’ultima riga e il tuo lavoro fino a gestire più di 2 è uguale a celle
    Non ho visto l’errore, dovrebbe essere risolto qui: jsfiddle.net/g7uY9/1

    InformationsquelleAutor Farid Nouri Neshat

  2. 6

    Si prega di trovare il migliorato la risposta per la tua ricerca con riga di espansione/compressione. Qui è il mio violino:

    function MergeGridCells()
    {
        var dimension_cells = new Array();
        var dimension_col = null;
    
        var i = 1;
        //First, scan first row of headers for the "Dimensions" column.
        $("#mytable").find('th').each(function () {
            if ($(this).text() == 'Id') {
                dimension_col = i;
            }
            i++;
        });
    
        //first_instance holds the first instance of identical td
        var first_instance = null;
        var rowspan=1;
        //iterate through rows
        $("#mytable").find('tr.parent-grid-row').each(function () {
    
            //find the td of the correct column (determined by the dimension_col set above)
            var dimension_td = $(this).find('td.parent-grid-column:nth-child(' + dimension_col + ')');
    
            if (first_instance == null) {
                //must be the first row
                first_instance = dimension_td;
            } else if (dimension_td.text() == first_instance.text()) {
                //the current td is identical to the previous
                //remove the current td
                dimension_td.remove();
                ++rowspan;
                //increment the rowspan attribute of the first instance
                first_instance.attr('rowspan', rowspan);
            } else {
                //this cell is different from the last
                first_instance = dimension_td;
                rowspan=1;
            }
        });
    }

    Jquery Unione Di Cella

    Sembra fresco e complessi per tale compito semplice. Ma qui il tuo +1

    InformationsquelleAutor Arasu RRK

  3. 1

    Mi è veramente piaciuto Farid prima soluzione, ma ho bisogno di selezionare l’intervallo di righe e colonne che si sarebbe applicata, così ho fatto un paio di modifiche (tra cui la possibilità di più di 2 cellule di tipo merge). http://jsfiddle.net/djhU7/72/

    function Merge_cells($id_table,$lin_ini,$lin_fim,$array_col=array()){
    
    $colunas="";  
    for($k=0;$k<count($array_col);$k++)  $colunas=$colunas . " col =='$array_col[$k]' ||";
    if(count($array_col)>0) $colunas="(".substr($colunas,0,-3).") &&";    
    
    echo   "<script>
    $('#$id_table td').each(function() 
    {
        var \$this = $(this);
        var col = \$this.index();                
        var txt =  \$this.text();                
        var row = $(this).parent()[0].rowIndex; 
    
        //define the interval of lines and columns it will look at
        if((col==0 || col==1 || col==2) row>=firstRow && row<=lastRow){ 
            span=1;
            cell_above = $(\$this.parent().prev().children()[col]);
    
            //look for cells one above another with the same text
            while(cell_above.text()=== txt){                    //if the text is the same
                span+=1;                                        //increase the span
                cell_above_old = cell_above;                    //store this cell
                cell_above = $(cell_above.parent().prev().children()[col]);    //and go to the next cell above
            }
    
            //if there are at least two columns with the same value, set a new span to the first and hide the other
            if(span>1) {
                console.log(span);
                $(cell_above_old).attr('rowspan',span); 
                \$this.hide();
            }              
        }
    });
    
           </script>";
    }

    InformationsquelleAutor carla

  4. 1

    Ho esteso carla soluzione.
    Con due funzioni, siamo in grado di unire in orizzontale o in verticale
    e di escludere o includere le celle da unire.
    provare il campione di lavoro. https://jsfiddle.net/bn3u63pe

    /*
    * merge horizontally
    * ex) autoMergeByCol('theTable', 2, 0, 0);
    */
    function autoMergeByCol(tableId
            , rowStartIndex //zero or positive
            , colStart      //zero or positive
            , colEnd        //equals to colStart or greater than colStart or negative to go to the end of cols
            ) {
        /*
        console.log('autoMergeByCol tableId=' + tableId
            + ', rowStartIndex=' + rowStartIndex
            + ', colStart=' + colStart
            + ', colEnd=' + colEnd
        );
        */
        var trArr = $('#' + tableId).find('tr');        //rows array
        for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
        var tdArr = $(trArr[rowIndex]).find('td');  //cols array of the row
        if(colEnd < 0) colEnd = tdArr.length - 1;       //if colEnd is negative, process at the end of the cols;
            for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
                var span = 1;
                var theCell = $(tdArr)[colIndex];
                if($(theCell).attr('rowspan')) {continue;}
                var cellNext = $($(theCell).parent().children()[colIndex + span]);      
                while(cellNext != undefined 
                        && $(theCell).text() == $(cellNext).text()
                        && colIndex + span <= colEnd ) {
                    span++;
                    cellNext.hide();
                    cellNext = $($(cellNext).parent().children()[colIndex + span]);     
                }
                if(span > 1) $(theCell).attr('colspan', span);
            }
        }
    }
    
    /*
    * merge vertically
    * ex) autoMergeByCol('theTable', 2, 0, 0);
    */
    function autoMergeByRow(tableId
            , rowStartIndex //zero or positive
            , colStart      //zero or positive
            , colEnd        //equals to colStart or greater than colStart or negative
            ) {
        /*
        console.log('autoMergeByRow tableId=' + tableId
            + ', rowStartIndex=' + rowStartIndex
            + ', colStart=' + colStart
            + ', colEnd=' + colEnd
        );
        */
        var trArr = $('#' + tableId).find('tr');            //rows array
        for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
            var tdArr = $(trArr[rowIndex]).find('td');  //cols array of the row
            if(colEnd < 0) colEnd = tdArr.length - 1;       //if colEnd is negative, process at the end of the cols;
            for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
                var span = 1;
                var theCell = $(tdArr)[colIndex];
                if($(theCell).attr('colspan')) {continue;}
                var cellBelow = $($(theCell).parent().next().children()[colIndex]);         
                while(cellBelow != undefined 
                        && $(theCell).text() == $(cellBelow).text()) {
                    span++;
                    cellBelow.hide();
                    cellBelow = $($(cellBelow).parent().next().children()[colIndex]);           
                }
                if(span > 1) $(theCell).attr('rowspan', span);          
            }
        }
    }

    InformationsquelleAutor Dennis Kim

  5. 1
      $(document).ready(function () {
            SummerizeTable($('#example'));
          })
    
    
    
          function SummerizeTable(table) {
            $(table).each(function () {
              $(table).find('td').each(function () {
                var $this = $(this);
                var col = $this.index();
                var html = $this.html();
                var row = $(this).parent()[0].rowIndex;
                var span = 1;
                var cell_above = $($this.parent().prev().children()[col]);
    
                while (cell_above.html() === html) { 
                  span += 1; 
                  cell_above_old = cell_above; 
                  cell_above = $(cell_above.parent().prev().children()[col]); 
                }
    
                if (span > 1) {
                  $(cell_above_old).attr('rowspan', span);
                  $this.hide();
                }
    
              });
            });
          }

    Vedi Esempio qui.

    InformationsquelleAutor Training at Manorama

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *