如何选择和合并动态创建表的单元格。 [英] How can I select and merge cells of a dynamic created table.
本文介绍了如何选择和合并动态创建表的单元格。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个动态表，并使用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>
解决方案
（document）.ready（function（）{
（'＃myTable td'）。click（function（）{
var selected =
（this）.hasClass（'反白标明'）;
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> 解决方案
(document).ready(function () {
('#myTable td').click(function () { var selected =
(this).hasClass('highlited');
这篇关于如何选择和合并动态创建表的单元格。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
