• 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
<html><head>
<script>

function redclr(){
 	for (var i = 1; i <= 3; i++) 
 	{
    	var lfckv = document.getElementById("lifecheck"+i).checked;
    	if (lfckv == true) {
			document.getElementById("row"+i).style.backgroundColor="red";
			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";
		}
	}
}

</script>
<style>
table,tr,td{ border:1px solid;
             width:200px;
             hieght:150px;
             border-collapse:collapse;
}
           
</style>
</head>
<body>
<table id="demo">

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

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

</tr>

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

</tbody></table>

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




</body></html>

Open in new window


For example: if I selected 1st and 2nd checkbox then first two row need too merge .
0
Ajith Kumar
Asked:
Ajith Kumar
  • 2
1 Solution
 
MishaProgrammerCommented:
Can you put your code here?
1
 
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:

//HTML

<table id="table">
    <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
    </tr>
</table>

<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

1
 
MishaProgrammerCommented:
There is no activity from author.
0
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