如何动态在另一个表中添加表

Question

每当我单击添加按钮时，都会为主表创建新行。如果我单击主表内部各行内的添加选项，则应创建内部表。但是它不能正常工作。

我有一个表，其中包含列名称部门持续时间。每当单击添加按钮时，应创建带有这些字段的新行。每行中都有一个按钮。对于每个名称，我应该能够添加多个部门和期限。我是stackoverflow的新手，无法在这里共享我的代码。

Answer 1

您可以尝试下面的代码在表中添加新行，

工作更新的代码为：

var new_id = 1;

function addNewRow() {
	$(".NewCheckBox").append("<tr align='center' style='background: #f2f2f2;''><th rowspan='2'><input type='text' size='1' /></th><th rowspan='2'><input type='text' size='1' /></th><th rowspan='2'><input type='text' size='1' /></th><th colspan='4'>Options</th><th rowspan='2'><input onclick='addNewOption(" + new_id + ")' id='button" + new_id + "' class='button" + new_id + "' type='button' value='add options" + new_id + "'></th><th rowspan='2'><input onclick='deteteRow(" + new_id + ")' id='deletebutton" + new_id + "' class='button" + new_id + "' type='button' value='Delete Option" + new_id + "'></th></tr><tr align='center'><td><table class='testingTable' id='testingTable" + new_id + "' border='1'><tr id='rowToClone' align='center' style='background: #f2f2f2;'><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td></tr></table></td></tr>");
	$('.button' + new_id).click(function () {
		$('.testingTable' + new_id).append("<tr align='center' style='background: #f2f2f2;'><td>ID</td><td>Value</td><td>Text</td><td></td></tr>");

	});
	new_id = new_id + 1;
}

function deteteRow(row) {
	console.log(row);
	if (row) {
		document.getElementById('testingTable' + row).deleteRow(row);
	}

}

function addNewOption(value) {
	console.log(value);
	var x = document.getElementById('testingTable' + value);
	// deep clone the targeted row
	var new_row = x.rows[0].cloneNode(true);
	// get the total number of rows
	var len = x.rows.length;
	// set the innerHTML of the first row 
	var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
	inp1.id += len;
	inp1.value = '';
	// set the innerHTML of the second row 
	var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
	inp2.id += len;
	inp2.value = '';
	// set the innerHTML of the third row 
	var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
	inp3.id += len;
	inp3.value = '';

	x.appendChild(new_row);
}

{
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
}

body {
	font: normal .80em 'trebuchet ms', arial, sans-serif;
	background: #F0EFE2;
	color: #777;
}

p {
	padding: 0 0 20px 0;
	line-height: 1.7em;
}

img {
	border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font: normal 175% 'century gothic', arial, sans-serif;
	color: #43423F;
	margin: 0 0 15px 0;
	padding: 15px 0 5px 0;
}

h2 {
	font: normal 175% 'century gothic', arial, sans-serif;
	color: #A4AA04;
}

h4,
h5,
h6 {
	margin: 0;
	padding: 0 0 5px 0;
	font: normal 120% arial, sans-serif;
	color: #A4AA04;
}

h5,
h6 {
	font: italic 95% arial, sans-serif;
	padding: 0 0 15px 0;
	color: #000;
}

h6 {
	color: #362C20;
}

a,
a:hover {
	outline: none;
	text-decoration: underline;
	color: #1293EE;
}

a:hover {
	text-decoration: none;
}

.left {
	float: left;
	width: auto;
	margin-right: 10px;
}

.right {
	float: right;
	width: auto;
	margin-left: 10px;
}

.center {
	display: block;
	text-align: center;
	margin: 20px auto;
}

blockquote {
	margin: 20px 0;
	padding: 10px 20px 0 20px;
	border: 1px solid #E5E5DB;
	background: #FFF;
}

ul {
	margin: 2px 0 22px 17px;
}

ul li {
	list-style-type: circle;
	margin: 0 0 6px 0;
	padding: 0 0 4px 5px;
}

ol {
	margin: 8px 0 22px 20px;
}

ol li {
	margin: 0 0 11px 0;
}

#main,
#logo,
#menubar,
#site_content,
#footer {
	margin-left: auto;
	margin-right: auto;
}

#header {
	background: #025587;
	height: 240px;
}

#logo {
	width: 825px;
	position: relative;
	height: 168px;
	background: #025587 url(logo.png) no-repeat;
}

#logo #logo_text {
	position: absolute;
	top: 20px;
	left: 0;
}

#logo h1,
#logo h2 {
	font: normal 300% 'century gothic', arial, sans-serif;
	border-bottom: 0;
	text-transform: none;
	margin: 0;
}

#logo_text h1,
#logo_text h1 a,
#logo_text h1 a:hover {
	padding: 22px 0 0 0;
	color: #FFF;
	text-decoration: none;
	font-size: 30px;
}

#logo_text h1 a .logo_colour {
	color: #80FFFF;
}

#logo_text h2 {
	font-size: 22px;
	padding: 4px 0 0 0;
	color: #DDD;
}

#menubar {
	width: 877px;
	height: 72px;
	padding: 0;
	background: #29415D url(menu.png) repeat-x;
}

ul#menu,
ul#menu li {
	float: left;
	margin: 0;
	padding: 0;
}

ul#menu li {
	list-style: none;
}

ul#menu li a {
	letter-spacing: 0.1em;
	font: normal 100% 'lucida sans unicode', arial, sans-serif;
	display: block;
	float: left;
	height: 37px;
	padding: 29px 26px 6px 26px;
	text-align: center;
	color: #FFF;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
}

ul#menu li a:hover,
ul#menu li.selected a,
ul#menu li.selected a:hover {
	color: #FFF;
	background: #1C2C3E url(menu_select.png) repeat-x;
}

#site_content {
	width: 837px;
	overflow: hidden;
	margin: 0 auto 0 auto;
	padding: 20px 24px 20px 37px;
	background: #FFF url(content.png) repeat-y;
}

.sidebar {
	float: right;
	width: 190px;
	padding: 0 15px 20px 15px;
}

.sidebar ul {
	width: 178px;
	padding: 4px 0 0 0;
	margin: 4px 0 30px 0;
}

.sidebar li {
	list-style: none;
	padding: 0 0 7px 0;
}

.sidebar li a,
.sidebar li a:hover {
	padding: 0 0 0 40px;
	display: block;
	background: transparent url(link.png) no-repeat left center;
}

.sidebar li a.selected {
	color: #444;
	text-decoration: none;
}

#content {
	text-align: left;
	width: 595px;
	padding: 0;
}

#content ul {
	margin: 2px 0 22px 0px;
}

#content ul li {
	list-style-type: none;
	background: url(bullet.png) no-repeat;
	margin: 0 0 6px 0;
	padding: 0 0 4px 25px;
	line-height: 1.5em;
}

#footer {
	width: 878px;
	font: normal 100% 'lucida sans unicode', arial, sans-serif;
	height: 33px;
	padding: 24px 0 5px 0;
	text-align: center;
	background: #29425E url(footer.png) repeat-x;
	color: #FFF;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

#footer a {
	color: #FFF;
	text-decoration: none;
}

#footer a:hover {
	color: #FFF;
	text-decoration: underline;
}

.search {
	color: #5D5D5D;
	border: 1px solid #BBB;
	width: 134px;
	padding: 4px;
	font: 100% arial, sans-serif;
}

.form_settings {
	margin: 15px 0 0 0;
}

.form_settings p {
	padding: 0 0 4px 0;
}

.form_settings span {
	float: left;
	width: 200px;
	text-align: left;
}

.form_settings input,
.form_settings textarea {
	padding: 5px;
	width: 299px;
	font: 100% arial;
	border: 1px solid #E5E5DB;
	background: #FFF;
	color: #47433F;
}

.form_settings .submit {
	font: 100% arial;
	border: 1px solid;
	width: 99px;
	margin: 0 0 0 212px;
	height: 33px;
	padding: 2px 0 3px 0;
	cursor: pointer;
	background: #263C56;
	color: #FFF;
}

.form_settings textarea,
.form_settings select {
	font: 100% arial;
	width: 299px;
}

.form_settings select {
	width: 310px;
}

.form_settings .checkbox {
	margin: 4px 0;
	padding: 0;
	width: 14px;
	border: 0;
	background: none;
}

.separator {
	width: 100%;
	height: 0;
	border-top: 1px solid #D9D5CF;
	border-bottom: 1px solid #FFF;
	margin: 0 0 20px 0;
}

table {
	margin: 10px 0 30px 0;
}

table tr th,
table tr td {
	background: #3B3B3B;
	color: #FFF;
	padding: 7px 4px;
	text-align: left;
}

table tr td {
	background: #F0EFE2;
	color: #47433F;
	border-top: 1px solid #FFF;
}

.login {
	height: 110px;
	width: 190px;
	margin: auto;
	border: 1px #CCC solid;
	padding: 10px;
}

.login input {
	padding: 5px;
	margin: 5px;
}

.submit {
	font: 100% arial;
	border: 1px solid;
	width: 80px;
	margin: 0 0 0 212px;
	height: 33px;
	padding: 2px 0 3px 0;
	cursor: pointer;
	background: #263C56;
	color: #FFF;
}

input[type="text"],
textarea,
select {
	border: 1px solid #BADEEA;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>Training Wing</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <meta name="description" content="website description" />
      <meta name="keywords" content="website keywords, website keywords" />
      <meta http-equiv="content-type"
         content="text/html; charset=windows-1252" />
      <link rel="stylesheet" type="text/css" href="style/style.css"
         title="style" />
      <link href="css-n-js/jquery-ui.css" rel="stylesheet">
      <script src="css-n-js/jquery-3.1.1.min.js"></script>
      <script src="css-n-js/bootstrap.min.js"></script>
      <script src="css-n-js/jquery-1.11.1.min.js"></script>
      <script src="css-n-js/jquery-ui.js"></script>
      <style>
         html
      </style>
   </head>
   <div id="fourthDynField" class="fieldType" style="font-family: arial; cursor: pointer; background-color: gainsboro; height: 10px; padding: 10px; font-size: 12px;">Field type : Radio button 
      <input type="button" value="Add" name="addCheckBox" id="addCheckBox" onclick="addNewRow()">
   </div>
   <div id="table">
      <div id="tableDyn4">
         <table id="NewCheckBox" class="NewCheckBox" border='1'>
            <tr align="center" style="background: #f2f2f2;">
               <th rowspan="2">Label</th>
               <th rowspan="2">Order</th>
               <th rowspan="2">Name</th>
               <th colspan="4">Options</th>
               <td rowspan="2"><input type="button" value="Add Option" id="button" class="button" onclick="addNewOption(this)"></td>
               <td><input type="button" id="Delete Option" value="Delete" onclick="deleteRow(this)" /></td>
            </tr>
            <tr align="center">
               <td>
                  <table id="testingTable" class="testingTable" border="1">
                     <tr align="center" style="background: #f2f2f2;">
                        <td>ID</td>
                        <td>Value</td>
                        <td>Text</td>
                        <td></td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </div>
   </div>