How to merge selected table cells using j query.

How to merge selected table cells using j query.

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.

  2. Code Behind:
  3.       
  4.   private void CreateTable()
  5.         {
  6.             int rowCtr;
  7.             int cellCtr;
  8.             int rowCount;
  9.             int cellCount;

  11.             Table Table1 = new Table();

  13.             Table1.ID = "myTable";

  15.             rowCount = int.Parse(txtrows.Text);
  16.             cellCount = int.Parse(txtcols.Text);

  18.             for (rowCtr = 0; rowCtr < rowCount; rowCtr++)
  19.             {
  20.                 TableRow tRow = new TableRow();
  21.                 Table1.Controls.Add(tRow);

  23.                 for (cellCtr = 0; cellCtr < cellCount; cellCtr++)
  24.                 {
  25.                     TableCell tcell = new TableCell();
  26.                     tRow.Cells.Add(tcell);
  27.                     //string prodID = rowCtr + "_" + cellCtr;
  28.                     //string field_name_lable = "RowColumn";
  29.                     //tcell.Text = field_name_lable
  30.                     TextBox txtbox = new TextBox();
  31.                     txtbox.Text = "Row:" + rowCtr + "  Column:" + " " + cellCtr;
  32.                     tcell.Controls.Add(txtbox);

  34.                     tRow.Controls.Add(tcell);
  35.                 }
  36.                 Table1.Rows.Add(tRow);
  37.             }
  38.             form1.Controls.Add(Table1);
  39.         }

  41. Html:

  44. <html xmlns="http://www.w3.org/1999/xhtml">
  45. <head runat="server">
  46.     <title></title>
  47.     <script src="jquery-3.3.1.min.js"></script>
  48.     <link href="StyleSheet1.css" rel="stylesheet" />
  49. </head>
  50. <body>
  51.     <script>
  53.  $(document).ready(function () {
  54.             $('#myTable td').click(function () {

  56.                 var selected = $(this).hasClass('highlited');
  57.                 $('#myTable tr').removeClass('highlited');

  59.                 if (!selected)
  60.                     $(this).addClass('highlited');
  61.             });
  62.         });
  63. </script>
  65.  <form id="form1" runat="server">
  66.        <div>
  67.             <b>Creating a dyanamic Table</b>
  68.            <table>
  69.                <tr>
  70.                    <td>Row:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  71.                         <asp:TextBox ID="txtrows" placeholder="No of Rows Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

  73.                        <br />
  74.                        <br />
  75.                    </td>
  76.                </tr>
  77.                <tr>
  78.                    <td>Coloum:
  79.                         <asp:TextBox ID="txtcols" placeholder="No of Coloums Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

  81.                        <br />
  82.                        <br />
  83.                    </td>
  84.                </tr>
  85.                <tr>
  86.                    <td>
  87.                        <asp:Button ID="btnCreateTable" Text="Create Table" runat="server" CssClass="btnStyle" OnClick="OnClickOfCreateTable" />
  88.                    </td>
  89.                </tr>
  90.            </table>
  91.            <br />
  92.            <br />
  93.            <asp:Button ID="btnMerge" Text="MergeCells" runat="server" CssClass="btnStyle" />
  94.        </div>
  95.     </form>
  96. </body>
  97. </html>
  99.