如何在 javascript/node.js 的 HTML tablesorter 表体中插入行？

Question

我使用 html/css/javascript/node.js/express/tablesorter 为我的公司应用制作了一个功能测试工具。

我的测试工具已成功执行功能测试。

我的表格样式来自开源“Tablesorter”。

这是编辑屏幕。该文件是.ejs 格式。因此，Node.js 服务器将文件动态呈现为 html。

但是，我想知道如何在此表中另外插入行。所以，我搜索解决了这个问题，并得到了一些解决方案，如下所示。

	for (var i in rList) {
		var table = document.getElementById("ID_Table");
		var row = table.insertRow(-1);
		var cell1 = row.insertCell(-1);
		var cell2 = row.insertCell(-1);
		var list = rList[i].split(" ");
		cell1.innerHTML = list[0];
		cell2.innerHTML = list[1];
	}

但是，这种方式是不完整的。结果是这样的。

“tablesorter”样式不适用于其他行。我不知道如何解决这个问题。

<!DOCTYPE html>
<html>
    <head>
	<!-- Character Set -->
	<meta charset="utf-8">

	<!-- Title -->
	<title><%= title %></title>
	
	<!-- Style -->
	<link rel='stylesheet' href='/stylesheets/style.css'/>
	
	<!-- JS -->
	<script src="/javascripts/indexCore.js"></script>

	<!-- jQuery -->
	<script src="/opensources/tablesorter/docs/js/jquery-latest.min.js"></script>
	<script src="/opensources/tablesorter/docs/js/jquery-ui.min.js"></script>
		
	<!-- Tablesorter: theme -->
	<link class="theme default" rel="stylesheet" href="/opensources/tablesorter/css/theme.default.css">
	<link class="theme blue" rel="stylesheet" href="/opensources/tablesorter/css/theme.blue.css">
	<link class="theme green" rel="stylesheet" href="/opensources/tablesorter/css/theme.green.css">
	<link class="theme grey" rel="stylesheet" href="/opensources/tablesorter/css/theme.grey.css">
	<link class="theme ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.ice.css">
	<link class="theme black-ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.black-ice.css">
	<link class="theme dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.dark.css">
	<link class="theme dropbox" rel="stylesheet" href="/opensources/tablesorter/css/theme.dropbox.css">
	<link class="theme metro-dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.metro-dark.css">

	<!-- Tablesorter script: required -->
	<script src="/opensources/tablesorter/js/jquery.tablesorter.js"></script>
	<script src="/opensources/tablesorter/js/widgets/widget-filter.js"></script>
	<script src="/opensources/tablesorter/js/widgets/widget-stickyHeaders.js"></script>

	<script id="js">
	$(function(){
		/* make second table scroll within its wrapper */
		$('#ID_Table').tablesorter({
			widthFixed : true,
			headerTemplate : '{content} {icon}', // Add icon for various themes
			widgets: [ 'zebra', 'stickyHeaders', 'filter' ],
			widgetOptions: {
				// jQuery selector or object to attach sticky header to
				stickyHeaders_attachTo : '.wrapper' // or $('.wrapper')
			}
		});
		
		$("#ID_Table tbody").click(function () {
			//$(this).addClass('selected').siblings().removeClass('selected');
			//alert('a');	
		});
	});
	</script>

	<script>
	$(function() { //이 부분은 렌더링 되자마자 실행되는 부분
		window.includeCaption = true;
		$('.caption').on('click', function(){
			includeCaption = !includeCaption;
			$(this).html( '' + includeCaption );
			$('#ID_Table').each(function(){
				if (this.config) {
					this.config.widgetOptions.stickyHeaders_includeCaption = includeCaption;
					this.config.widgetOptions.$sticky.children('caption').toggle(includeCaption);
				}
			});
		});

		// removed jQuery UI theme because of the accordion!
		$('link.theme').each(function(){ this.disabled = true; });
		
		var themes = 'dropbox blue green grey ice black-ice dark default metro-dark', //테마 순서
			i, o = '', t = themes.split(' ');
		for (i = 0; i < t.length; i++) {
			o += '<option value="' + t[i] + '">' + t[i] + '</option>';
		}
		
		$('select:first')
			.append(o)
			.change(function(){
				var theme = $(this).val().toLowerCase(),
					// ui-theme is added by the themeswitcher
					files = $('link.theme').each(function(){
						this.disabled = true;
					})
				files.filter('.' + theme).each(function(){
					this.disabled = false;
				});
				$('table')
					.removeClass('tablesorter-' + t.join(' tablesorter-'))
					.addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) );
			}).change();
	});
	</script>
    </head>
	
    <body>
	<div id="header">
		<h1><%= title %></h1>
		<p>Welcome to <%= title %></p>
		
		<a href="/screenMain" id="screenMain">Main</a>
		<a href="/screenEdit" id="screenEdit">Edit</a>
		<a href="/" id="screenBlank">Blank</a>
		<hr/>
	</div>

	
	
	<div id="wrap">
		<div id="Main_Screen">
			<input type="button" value="로딩" id="btn" onclick="dynamicLoadScript_Main('/temps/MainScript.js', '/temps/WrapScript.js')"></input>
			<input type="button" value="수행" id="btn1" onclick="Automation()"></input>
			<button type="button">결과 리스트 출력</button>
		</div>
		
		<div id="List_Screen" class="narrow-block wrapper">
		Theme: <select></select>
		<table id="ID_Table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
			<thead>
			<tr>
				<th>Function</th>
				<th>Result</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td></td>
				<td></td>
			</tr>
			</tbody>
		</table>
		</div>
	</div>
		
    </body>
</html>

这是我的 .ejs 文件。

而且，这是 indexCore.js 中的 printResult 函数。

function printResult(){
	var rList = resultList.split('\n');
	
	for (var i in rList) {
		var table = document.getElementById("ID_Table");
		var row = table.insertRow(-1);
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var list = rList[i].split(" ");
		cell1.innerHTML = list[0];
		cell2.innerHTML = list[1];
	}
}

Answer 1

您可以直接在后端的.ejs 文件中编辑和应用您的逻辑，因为您的客户端解决方案似乎是在Tablesorter 初始化表之后运行的。您还可以尝试实现您的客户端解决方案，首先将行添加到表中，然后初始化Tablesorter。祝你好运！