• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 46
  • Last Modified:

how to merge checked column using js or jquery/

Hi, I created a table with three rows and 4 column and I have a checkbox for each row.
like this
Then if I click the merge button the row which is checked are to be merged

function redclr(){
 	for (var i = 1; i <= 3; i++) 
    	var lfckv = document.getElementById("lifecheck"+i).checked;
    	if (lfckv == true) {
			var tds = document.getElementsByTagName("td");
        	var firstCellId = "";
        	var mergedCells = "";
        for (var i = 0; i < tds.length; i++) {
                mergedCells += tds[i].textContent;
                if (firstCellId == "") {
                    firstCellId = tds[i].id;
                else {
                    tds[i].style.backgroundColor = "gray";
                    tds[i].style.display = "none";
                    tds[i].textContent = "";
        var firstCell = document.getElementById(firstCellId);
        firstCell.textContent = mergedCells;
        firstCell.style.backgroundColor = "gray";

table,tr,td{ border:1px solid;
<table id="demo">

<tr id="row1">
<td id="sel1">a<input type="checkbox" id="lifecheck1"></td>
<td id="sel2">b</td>
<td id="sel3">c</td>

<tr id="row2">
<td id="sel4">d<input type="checkbox" id="lifecheck2"></td>
<td id="sel5">e</td>
<td id="sel6">f</td>


<tr id="row3">
<td id="sel7">g<input type="checkbox" id="lifecheck3"></td>
<td id="sel8">h</td>
<td id="sel9">i</td>


<button type="button" onclick="redclr()">merge</button> 


Open in new window

For example: if I selected 1st and 2nd checkbox then first two row need too merge .
Ajith Kumar
Ajith Kumar
  • 2
1 Solution
Can you put your code here?
Chris StanyonCommented:
Your code looks a little confusing so it's not clear exactly what you need merging and where you want the merged results to go. You've tagged this as jQuery, so I'm guessing you want a jQuery solution. Take a look at the following:


<table id="table">
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>

<button id="merge">merge</button>

Open in new window

// jQuery

$(document).ready(function() {
    $('#merge').click(function(e) {
        $('#table tr').each(function(i, row) {
            var text = "";
            if ($(row).find('input').is(":checked")) {
                $(row).css('background-color', 'red');
                $(row).find('td').each(function() {
                    text += $(this).text();
                $('td:first-child', row).text(text);

Open in new window

There is no activity from author.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now