Syf AK Ответов: 2

Как выбрать и объединить ячейки динамической созданной таблицы?

Я создал динамическую таблицу и выделил(щелкнув td) ячейки таблицы с помощью jquery. Теперь я хочу объединить выбранные ячейки таблицы по щелчку кнопки(merge). Как я могу это сделать?

Что я уже пробовал:

            <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>

littleGreenDude

Я не вижу, где вы вызываете CreateTable. Если я прав, то это выглядит так, как будто вы собираете количество строк и столбцов из введенных пользователем полей, а затем динамически создаете таблицу?

Если это так, то функция click в document ready не имеет ничего, к чему можно было бы прикрепиться, и никогда не будет запущена. Попробуйте добавить прослушиватель событий в логику создания таблицы.

tr.setAttribute('onclick', "(function(){ ChangeRow(); })()");

2 Ответов

Рейтинг:
2

Vincent Maverick Durano

Видеть: Слияние и разделение ячеек таблицы с помощью JavaScript – Redips spideR Net[^]

Syf AK

https://www.redips.net/javascript/table-td-merge-split это похоже на библиотеку сценариев java. Я пытаюсь сделать это с помощью какого-то пользовательского java-скрипта или jquery.

Рейтинг:
2

littleGreenDude

Надеюсь, это то, что вы искали, если нет, то это должно приблизить вас к тому, куда вы хотите пойти. Я добавил комментарии по всему ключевому высказыванию.

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

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');
	// add onclick call to table body
	tableBody.onclick = function (e) {
		ChangeRow(e);
	};
	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');
		tr.id = 'info';
		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);
}

function ChangeRow(e){
	e = e || window.event;
	var target = e.srcElement || e.target;
	// make sure our click targets a table cell
	while (target && target.nodeName !== "TD") {
		target = target.parentNode;
	}
	if (target) {
		var sibling = target.nextSibling;
		// make sure we have a sibling, the last column doesn't
		if(sibling) {
			// make current cell span 2 columns
			target.colSpan = "2";
			// merge sibling text to the first cell
			target.innerText = target.innerText + sibling.innerText;			
			// delete cell that was merged in to the first cell
			sibling.remove();
		}
	}
}

	$(document).ready(function () {
		
	});
 
</script>
<html>


<body>
  Rows: <input type="text" id="txtrows" size="2" ><br>
  Columns: <input type="text" id="txtcols" size="2" ><br>
<input type="button" value="Create The Table" onclick="CreateTable()">
<div id="myDynamicTable">
</div>

</body>
</html>