如何选择和合并动态创建表的单元格。

本文介绍了如何选择和合并动态创建表的单元格。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个动态表，并使用jquery选择（在单击td时）表格单元格。现在我想在按钮（合并）单击上合并选定的表格单元格。我怎么能这样做。

我尝试过：

< pre lang =HTML> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head id =Head1runat =server> 
< title>< / title> 
< script src =jquery-3.3.1.min.js>< / script> 
< link href =StyleSheet1.css =stylesheet/> 
< / head> 
函数CreateTable（）{
 var rowCtr; 
 var cellCtr; 
 var rowCnt; 
 var cellCnt; 
 var myTableDiv = document.getElementById（myDynamicTable）; 
 var table = document.createElement（'Table'）; 
 table.border ='1'; 
 table.id ='myTable'; 
 var tableBody = document.createElement（'Tbody'）; 
 table.appendChild（tableBody）; 
 rowCnt = document.getElementById（'txtrows'）。value; 
 cellCnt = document.getElementById（'txtcols'）。value; 
 for（var rowCtr = 0; rowCtr< rowCnt; rowCtr ++）{
 var tr = document.createElement（'tr'）; 
 tableBody.appendChild（tr）; 
 for（var cellCtr = 0; cellCtr< cellCnt; cellCtr ++）{
 var td = document.createElement（'td'）; 
 td.width ='120'; 
 td.appendChild（document.createTextNode（Row：+ rowCtr +Column：+ cellCtr））; 
 tr.appendChild（td）; 
} 
} 
 myTableDiv.appendChild（table）; 
 $（document）.ready（function（）{
 $（'＃myTable td'）。click（function（）{
 var selected = $（this）.hasClass（'highlited '）; 
 $（'＃myTable tr'）。removeClass（'highlited'）; 
 if（！selected）
 $（this）.addClass（'highlited'）; 
}）; 
}）; 
} 
< form id =form1runat =server> 
< div id =myDynamicTable> 
 创建动态表 
< table> 
< tr> 
< td>行：      
< asp：TextBox ID =txtrows占位符=此处没有行runat =serverAutoCompleteType =已禁用>< / asp：TextBox> 
 
< br /> 
< br /> 
< / td> 
< / tr> 
< tr> 
< td> Coloum：
< asp：TextBox ID =txtcolsplaceholder =No Coloums Hererunat =serverAutoCompleteType =Disabled>< / asp：TextBox> ; 
 
< br /> 
< br /> 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Button ID =btnCreateTableText =Create Tablerunat =serverCssClass =btnStyleOnClick =OnClickOfCreateTable/> 
< / td> 
< / tr> 
< / table> 
 
< br /> 
< br /> 
< asp：Button ID =btnMergeText =MergeCellsrunat =serverCssClass =/> 
< / div> 
< / form> 
< / body> 
< / html>

解决方案

I have created a dynamic table and selecting(on clicking td) the table cells using jquery. Now i want to merge the selected table cells on button(merge) click. How can i do this.

What I have tried:

            <pre lang="HTML">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head id="Head1" runat="server">
            <title></title>
            <script src="jquery-3.3.1.min.js"></script>
            <link href="StyleSheet1.css" rel="stylesheet" />
            </head>
            function CreateTable() {
            var rowCtr;
            var cellCtr;
            var rowCnt;
            var cellCnt;
            var myTableDiv = document.getElementById("myDynamicTable");
            var table = document.createElement('Table');
            table.border = '1';
            table.id = 'myTable';
            var tableBody = document.createElement('Tbody');
            table.appendChild(tableBody);
            rowCnt = document.getElementById('txtrows').value;
            cellCnt = document.getElementById('txtcols').value;
            for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
                var tr = document.createElement('tr');
                tableBody.appendChild(tr);
                for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                    var td = document.createElement('td');
                    td.width = '120';
                    td.appendChild(document.createTextNode("Row:" + rowCtr + " Column:" + cellCtr));
                    tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);
            $(document).ready(function () {
                $('#myTable td').click(function () {
                    var selected = $(this).hasClass('highlited');
                    $('#myTable tr').removeClass('highlited');
                    if (!selected)
                        $(this).addClass('highlited');
                });
            });
        }
    <form id="form1" runat="server">
       <div id="myDynamicTable">
            Creating a dyanamic Table
           <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="/>    
       </div>         
    </form>
</body>
</html>

解决方案

这篇关于如何选择和合并动态创建表的单元格。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！