how to merge html table columns(or cells) based on their ids by using javascript or jquery?

Question

i am having the following html.

<table>
    <tbody>
    <tr>
        <td>text</td> 
        <td>text</td>
        <td id='7'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='7' >xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='8'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='8'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='8'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='9' >xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='10' >xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='10'>xyz</td>
    </tr>
    </tbody>
</table>

in this table i want to merge those cells whose id value is same.

for example:

in each row i am having 3 cells. and i am dynamically assigning the id value to the 3rd cell of each row. now i want to merge those cells whose id values are same with each other. like all td's those are having id as "7" i want to merge them as single cell. similarly for td'shaving id value as "8"and "9" as one cell. like this so on. how can i do this by using the jQuery or java script?

i have taken unique ids only for the cells those i want to merge. — John, Aug 06 '15 at 07:56
use class for defining the cells to be merged. Where do you want to merge the cells first cell with same class or last cell with same class or a specific cell with a specific class? — maniacneron, Aug 06 '15 at 07:56

score 1 · Answer 1 · answered Aug 06 '15 at 08:07

Solution approach:-

You have to alter the logic in such a way that whenever similar id comes, for instance, id="7" in the first record then put a rowspan attribute and count the number of time it comes. Accordingly you can put the rowspan number n there then remove the where ever that id has occurred from below. I assume that these id are assigned continuously not random

<tr>
        <td>text</td>
        <td>text</td>
        <td id='8' rowspan="N">>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
     </tr>

    <table class="tg">
  <tr>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
  </tr>
  <tr>
    <td class="tg-031e"></td>
    <td class="tg-031e" rowspan="2"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
</table>

score 1 · Answer 2 · answered Aug 06 '15 at 08:41

Please check out this js fiddle https://jsfiddle.net/wh5Lx1f0/ I agree with other guys that ids must be unique.

var idToElementCount = {};
$('[data-id]').each(function() {
    var $this = $(this);
    var id = $this.attr('data-id');
    if(!idToElementCount.hasOwnProperty(id)) {
        idToElementCount[id] = 0;
    }

    idToElementCount[id]++;
});

for(var currentId in idToElementCount) {
    $('[data-id='+currentId + "]")
        .first()
        .attr("rowspan", idToElementCount[currentId])
        .end()
    .filter(":gt(0)")
    .remove()



}

score 0 · Accepted Answer · answered Aug 06 '15 at 08:02

var currentID;
var count = 1;
var lastRow;
$("table > tbody > tr").each(function () {
    var id = $(this).children(":eq(2)").attr("id");
    if (id === currentID) {
        count++;
        $(this).children(":eq(2)").remove();
    } else {
        $(lastRow).children(":eq(2)").attr("rowspan", count)
        currentID = id;
        count = 1;
        lastRow = this;
    }
});

if (count !== 1) {
    $(lastRow).children(":eq(2)").attr("rowspan", count);
}

var currentID;
var count = 1;
var lastRow;
$("table > tbody > tr").each(function () {
  var id = $(this).children(":eq(2)").attr("id");
  if (id === currentID) {
    count++;
    $(this).children(":eq(2)").remove();
  } else {
    $(lastRow).children(":eq(2)").attr("rowspan", count)
    currentID = id;
    count = 1;
    lastRow = this;
  }
});

if (count !== 1) {
  $(lastRow).children(":eq(2)").attr("rowspan", count);
}

td {
    border: solid 1px black;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <tbody>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='7'>xyz</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='7'>xyz</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='8'>xyz</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='8'>xyz</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='8'>xyz</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='9'>xyz</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='10'>xyz</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text</td>
                <td id='10'>xyz</td>
            </tr>
        </tbody>
    </table>

how to merge html table columns(or cells) based on their ids by using javascript or jquery?

3 Answers3