时间戳

首页 > 解决方案 > 用java脚本建立一个嵌套表

javascript - 用java脚本建立一个嵌套表

问题描述

我有一个现有的嵌套 HTML 表，其代码如下所示，我正在尝试仅使用 JS 进行重建。如果表格是平的，我可以做到这一点，但我对如何重建这个我只使用 JS 给出的示例 HTML 表格感到困惑。如果您从 HTML 示例代码中看到我可以在 JS 代码中执行的操作，那么我的主要问题在于heading AJS 代码，但我正在努力解决的部分是我调用的表的部分heading B以及heading B.

这是我现有的表格代码，我试图弄清楚如何在 这里仅通过 JS JsFiddle 代码创建

<table id="example" class="table table-striped">
    <thead>
        <tr>
            <th>HEADING A </th>
            <th>HEADING A</th>
            <th>HEADING A</th>
            <th>HEADING A</th>
        </tr>
    </thead>


    <tbody>

        <tr>
            <td >INPUT 1.A</td>
            <td >INPUT 1.A</td>
            <td>INPUT 1.A</td>

            <td>
                <table id="example1" class="table table-nostriped">
                      <th>HEADING B</th>
                       <th>HEADING B</th>
                       <th>HEADING B</th>
                    <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                    </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>
                </table>
            </td>
            </tr>
            <!-- Second table entry here -->
            <tr>
            <td >INPUT 2.A</td>
            <td >INPUT 2.A</td>
            <td>INPUT 2.A</td>

            <td>
                <table id="example1" class="table table-nostriped">
                      <th>HEADING B</th>
                       <th>HEADING B</th>
                       <th>HEADING B</th>
                    <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                    </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>

                </table>
            </td>
            </tr>


    </tbody>
</table>

如果表格是平的，我可以创建表格，但由于其中的嵌套部分，我遇到了一些麻烦。这是我从 JS 方面得到的，它并不多，但正如我提到的，我有点困惑如何做到这一点，因为它是嵌套的。

$('table').hide();

var $table = $('<table id="UserDataTable" class="table table-hover">');
$table.append()

// THEAD
  .append('<thead>').children('thead')
  .append('<tr />').children('tr').append('<th>HEADING A</th>\
<th>HEADING A</th>\
<th>HEADING A</th>\
<th>HEADING A</th>\
');

// ADD TABLE TO DOM
$table.appendTo('#dynamicTable');// create tabl
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


<div class="container">
    <div id="dynamicTable">
    </div><br>
</div>

标签： javascripthtmljquery

解决方案

我构建了一个简单的算法来使用 jQuery 动态生成您的表格。这不是最好的算法，但它是一个开始。

我希望它对你有用。

$(document).ready(function() {

function getHeading(text)
{
    return $("<tr>")
      .append($('<th>').text(text))
      .append($('<th>').text(text))
      .append($('<th>').text(text))
      .append($('<th>').text(text));
}

function getInput(text)
{
	return $('<tr>').append(
			$('<td>').text(text)
		).append(
			$('<td>').text(text)
		).append(
			$('<td>').text(text)
		);
}

function getX(input, heading)
{
	var subTable =  $("<table>", {"class": "table"})
		.append(
			$('<tr>').append(
				$('<th>').text(heading)
			).append(
				$('<th>').text(heading)
			).append(
				$('<th>').text(heading)
			)
		).append(getInput('INPUT 1.B'))
		.append(getInput('INPUT 1.B'))
		.append(getInput('INPUT 1.B'));

var tr = $('<tr>')
  .append($('<td>').text(input))
  .append($('<td>').text(input))
  .append($('<td>').text(input))
  .append($('<td>').append(subTable));
  return tr;
}

var table = $("<table>", {"class": "table"});


table = table
.append(getHeading('HEADING A'))
.append(getX('INPUT 1.A', 'HEADING B'))
.append(getX('INPUT 2.A', 'HEADING B'));

$('body').append(table);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body></body>

推荐阅读