build a nested table with java script

Question

I have an existing nested HTML table with code shown below that I am trying to rebuild only using JS. I am able to do this if the table were to be flat but I am confused on how to rebuild this example HTML table I gave with only using JS. My main issue here is in the JS code if you see from the HTML example code I have heading A which I am able to do in the JS code but the part I am struggling with is the portion of the table i called heading B and the corresponding input for heading B.

Here is my existing table code that I am trying to figure out how to create via only JS JsFiddle code here

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

I am able to create the table if it were flat but I am having a bit of trouble due to the nested part of this. Here is what I have from the JS side its not much but as I mentioned Im a bit confused how to do this since it's nested.

$('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>

I made some changes to the code to make sure it doesn't break. If this is the issue you can close the question. If the issue is something else - please be more specific about it. — Dekel
– Dekel, Commented Apr 24, 2020 at 18:40
Im trying to figure out how to take the HTML table example I gave and re-build it using only JS — Max Powers
– Max Powers, Commented Apr 24, 2020 at 18:49
@Dekel Changes to a question made to "fix" them should not be done. Fixes should be posted as answers. Modifications to logic in an OPs question should be left up to the OP. — Taplar
– Taplar, Commented Apr 24, 2020 at 18:50
@Matt That is not telling us what issue you are having. You have an example of making the flat part. What issues are you now having with further expanding that logic to append to the table you just logically created? — Taplar
– Taplar, Commented Apr 24, 2020 at 18:51

Cristian V · Accepted Answer · 2020-04-25 18:33:41Z

I builded a simple algorithm to generate your table on the fly using jQuery. It's not the best algorithm but it's a start.

I hope it will be useful to you.

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

Josh · Accepted Answer · 2020-04-24 18:58:01Z

Try to recreate the table first in jquery, then append it on the target row, target td.

See snippet for sample

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

I tried to run this code outside on JsFiddle and it not creating the table using JS code. Maybe I am missing something jsfiddle.net/mastarke/6nj9wxyz/1

FroboZ · Accepted Answer · 2020-04-24 19:03:45Z

0

Use 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')

You can of course also set any other attribute you want by manipulating the Element variables.

answered Apr 24, 2020 at 19:03

FroboZ

4371 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

build a nested table with java script

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related