построить вложенную таблицу с помощью скрипта java

Question

У меня есть существующая вложенная таблица HTML с приведенным ниже кодом, который я пытаюсь восстановить только с использованием JS. Я могу сделать это, если таблица должна быть плоской, но я не понимаю, как перестроить этот пример таблицы HTML, которую я дал только с использованием JS. Моя главная проблема здесь в коде JS, если вы видите из примера кода HTML, который у меня есть heading A, который я могу сделать в коде JS, но часть, с которой я борюсь, это часть Таблица, которую я назвал 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>

Answer 1

Я создал простой алгоритм для генерации вашей таблицы на лету, используя 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>

Answer 2

Использование createElement https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

let table = document.createElement('table')
let head = document.createElement('thead')
let th = document.createElement('th')
th.innerHTML = 'Content of TH'
head.append(th)
let body = document.createElement('tbody')
let tr = document.createElement('tr')
let td = document.createElement('td')
td.innerHTML = 'content of TD'
tr.append(td)
body.append(tr)
table.append(head)
table.append(body)
document.querySelector('#dynamicTable').append('table')

Конечно, вы также можете установить любой другой атрибут, который хотите, манипулируя переменными Element.

Answer 3

Попробуйте сначала воссоздать таблицу в jquery, а затем добавить ее в строку назначения, целевое значение td.

См. Фрагмент для примера

$(document).ready(function() {


var dynamicTable = $("<table/>")
  .append($("<th/>").text("HEADING B"))
  .append($("<th/>").text("HEADING B"))
  .append($("<th/>").text("HEADING B"))
  
  $.each([1,2,3], function(index,value) {
    var dynamicRow = $("<tr/>")
      .append($("<td/>").text("INPUT 1.B"))
      .append($("<td/>").text("INPUT 1.B"))
      .append($("<td/>").text("INPUT 1.B"))
      
      $(dynamicTable).append(dynamicRow)
  }) 
  
  var row = $("<tr/>")
        .append($("<td/>").text("INPUT 1.A"))
        .append($("<td/>").text("INPUT 1.A"))
        .append($("<td/>").text("INPUT 1.A"))
        .append($("<td/>").append(dynamicTable))
        
        $("#example > tbody").append(row)

})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" >
    <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 -->
        </tbody>
    </table>
</div>