Search jQuery

jQuery Forum

How to merge selected table cells using j query.

in Using jQuery • 4 years ago

I have created a dynamic table based on user input using c#, and written jquery to select the table cells this is working fine. Now i want merge the selected those table cells using j query or java script. how can i do this? C

Thanks, Regards.

Code Behind:
private void CreateTable()
{
int rowCtr;
int cellCtr;
int rowCount;
int cellCount;
Table Table1 = new Table();
Table1.ID = "myTable";
rowCount = int.Parse(txtrows.Text);
cellCount = int.Parse(txtcols.Text);
for (rowCtr = 0; rowCtr < rowCount; rowCtr++)
{
TableRow tRow = new TableRow();
Table1.Controls.Add(tRow);
for (cellCtr = 0; cellCtr < cellCount; cellCtr++)
{
TableCell tcell = new TableCell();
tRow.Cells.Add(tcell);
//string prodID = rowCtr + "_" + cellCtr;
//string field_name_lable = "RowColumn";
//tcell.Text = field_name_lable
TextBox txtbox = new TextBox();
txtbox.Text = "Row:" + rowCtr + " Column:" + " " + cellCtr;
tcell.Controls.Add(txtbox);
tRow.Controls.Add(tcell);
}
Table1.Rows.Add(tRow);
}
form1.Controls.Add(Table1);
}
Html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<script>
$(document).ready(function () {
$('#myTable td').click(function () {
var selected = $(this).hasClass('highlited');
$('#myTable tr').removeClass('highlited');
if (!selected)
$(this).addClass('highlited');
});
});
</script>
<form id="form1" runat="server">
<div>
<b>Creating a dyanamic Table</b>
<table>
<tr>
<td>Row:     
<asp:TextBox ID="txtrows" placeholder="No of Rows Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
<br />
<br />
</td>
</tr>
<tr>
<td>Coloum:
<asp:TextBox ID="txtcols" placeholder="No of Coloums Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
<br />
<br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnCreateTable" Text="Create Table" runat="server" CssClass="btnStyle" OnClick="OnClickOfCreateTable" />
</td>
</tr>
</table>
<br />
<br />
<asp:Button ID="btnMerge" Text="MergeCells" runat="server" CssClass="btnStyle" />
</div>
</form>
</body>
</html>

Replies(5)

jakecigar

Re: How to merge selected table cells using j query.

4 years ago

change

$('#myTable td').click(function () {

$(document).on("click", ’#myTable tr’,function () {

JΛ̊KE

saifulla

Re: How to merge selected table cells using j query.

4 years ago

Sorry I didn't get you. @jakecigar

jakecigar

Re: How to merge selected table cells using j query.

4 years ago

If that is too complex, share a link to your site. Or you can ask on some ASP forum because ASP is a foreign language here.

JΛ̊KE

watusiware

Re: How to merge selected table cells using j query.

4 years ago

Change line 54! Make the change that Jake showed you. You need to use a "delegated" event. Delegated events can deal with HTML that is added dynamically. Non-delegated (.click()) can't.

It's not useful to post your "code behind", or <asp:... and <runat... It has nothing to do with jQuery, and 99.99% of people here do not know anything about it.

You can provide a link to your site, and we can look at it with browser debug tools. Or you can capture the HTML with your browser "view source", and perhaps make a jsFiddle.

jakecigar

Re: How to merge selected table cells using j query.

4 years ago

Replace the entire <script> with…

<script>
$(document).on("click", ’#myTable tr’,function () {
$(this).siblings().removeClass('highlited');
$(this).addClass('highlited');
});
</script>

You don’t have to worry about adding a class to an element that already has that class.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

How to merge selected table cells using j query.

Replies(5)

Re: How to merge selected table cells using j query.

Re: How to merge selected table cells using j query.

Re: How to merge selected table cells using j query.

Re: How to merge selected table cells using j query.

Re: How to merge selected table cells using j query.

Statistics

Tags

Actions