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.

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

  9.             Table Table1 = new Table();

  10.             Table1.ID = "myTable";

  11.             rowCount = int.Parse(txtrows.Text);
  12.             cellCount = int.Parse(txtcols.Text);

  13.             for (rowCtr = 0; rowCtr < rowCount; rowCtr++)
  14.             {
  15.                 TableRow tRow = new TableRow();
  16.                 Table1.Controls.Add(tRow);

  17.                 for (cellCtr = 0; cellCtr < cellCount; cellCtr++)
  18.                 {
  19.                     TableCell tcell = new TableCell();
  20.                     tRow.Cells.Add(tcell);
  21.                     //string prodID = rowCtr + "_" + cellCtr;
  22.                     //string field_name_lable = "RowColumn";
  23.                     //tcell.Text = field_name_lable
  24.                     TextBox txtbox = new TextBox();
  25.                     txtbox.Text = "Row:" + rowCtr + "  Column:" + " " + cellCtr;
  26.                     tcell.Controls.Add(txtbox);

  27.                     tRow.Controls.Add(tcell);
  28.                 }
  29.                 Table1.Rows.Add(tRow);
  30.             }
  31.             form1.Controls.Add(Table1);
  32.         }

  33. Html:

  34. <html xmlns="http://www.w3.org/1999/xhtml">
  35. <head runat="server">
  36.     <title></title>
  37.     <script src="jquery-3.3.1.min.js"></script>
  38.     <link href="StyleSheet1.css" rel="stylesheet" />
  39. </head>
  40. <body>
  41.     <script>
  42.  $(document).ready(function () {
  43.             $('#myTable td').click(function () {

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

  46.                 if (!selected)
  47.                     $(this).addClass('highlited');
  48.             });
  49.         });
  50. </script>
  51.  <form id="form1" runat="server">
  52.        <div>
  53.             <b>Creating a dyanamic Table</b>
  54.            <table>
  55.                <tr>
  56.                    <td>Row:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  57.                         <asp:TextBox ID="txtrows" placeholder="No of Rows Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

  58.                        <br />
  59.                        <br />
  60.                    </td>
  61.                </tr>
  62.                <tr>
  63.                    <td>Coloum:
  64.                         <asp:TextBox ID="txtcols" placeholder="No of Coloums Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

  65.                        <br />
  66.                        <br />
  67.                    </td>
  68.                </tr>
  69.                <tr>
  70.                    <td>
  71.                        <asp:Button ID="btnCreateTable" Text="Create Table" runat="server" CssClass="btnStyle" OnClick="OnClickOfCreateTable" />
  72.                    </td>
  73.                </tr>
  74.            </table>
  75.            <br />
  76.            <br />
  77.            <asp:Button ID="btnMerge" Text="MergeCells" runat="server" CssClass="btnStyle" />
  78.        </div>
  79.     </form>
  80. </body>
  81. </html>
  82.