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

问题描述

我创建了一个动态表,并使用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>
解决方案




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

10-27 20:27