Search code examples
htmlcsshtml-tablehtml5-canvascss-tables

Creating a nested table that overlaps rows and columns of its parent table in HTML

I want to create a table like one of the following: The Table I want: https://i.sstatic.net/RJp4U.png And I have used the following Code here:

<body>
    <table id="tab1">
        <tr><td>Name</td>
            <tr><td>Name Table<br>
                <table id="tab2">
                    <tr><td>Yash</td></tr>
                    <tr><td>Rocky</td></tr>
                    <tr><td>Garuda</td></tr>
                    <tr><td>Selena</td></tr>
                </table></td>
        <td>Age</td>
    <td>Addresses</td>
    </tr>
        </table>
The Stylesheets are like this: 
#tab1{border: 1px solid red;}
#tab1 table{border: 1px solid red;}
#tab2{border: 1px solid black;}

But I eventually end up with the following: https://i.sstatic.net/nOGLA.png
Now, how should I make changes in the snippet to perfectly match my code? Furthermore, I want such a table that when I click on the Name row, Only the names will come as a table that will surpass the columns of age and addresses, but the column head with name age and addresses will remain as it is. I used onclick() function but it actually didn't work.

Solution

  • first you have to define a header line with all the three td

    then you can create the sub table with a td with colspan="3" for tab2

    then for the update of data in tab2 you can :

    • add event listener on each header td
    • store data in a structure with data key = an id you can recover easily
    • loop on each data an insert it in tab2 with insertRow and insertCell

    var data = {
  name: [
    'Yash',
    'Rocky',
    'Garuda',
    'Selena'
  ],
  age: [
    '12',
    '15',
    '16'
  ],
  addresses: [
    'address1',
    'address2',
    'address3'
  ]
};

[...document.querySelectorAll('.header td')].forEach(elem => {
  elem.addEventListener('click', function () {
    var tab2 = document.getElementById('tab2');
    if (tab2) {
      tab2.innerHTML = "";
      if (data[elem.dataset.src]) {
        data[elem.dataset.src].forEach(oneData => {
          var row = tab2.insertRow();
          var cell = row.insertCell();
          cell.innerText = oneData;
        });
      }
    }
  });
});
    table {
      
      border-collapse: collapse;
    }

    .header td:hover {
      background: lightgrey;
      cursor: pointer;
    }

    td {
      border: solid 1px;
      margin: 0;
    }

    #tab2 td {
      border: none;
    }
    <table id="tab1">
      <tr class="header">
        <td data-src="name">Name</td>
        <td data-src="age">Age</td>
        <td data-src="addresses">Addresses</td>
      </tr>
      <tr>
        <td colspan="3">
          <table id="tab2">
            <tr>
              <td><a href="https://stackoverflow.com" >Yash</a></td>
            </tr>
            <tr>
              <td><a href="https://stackoverflow.com" >Rocky</a></td>
            </tr>
            <tr>
              <td>Garuda</td>
            </tr>
            <tr>
              <td>Selena</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>