Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Get the each cell data from Table cell and Append to UL

I have a table with multiple rows (dynamically) with cell data.

I want to get the each row data and append to as list item

jsFiddle

Table

enter image description here

Desired Output:

  • Raj

    • English: 86
    • Maths: 73
    • Science: 68

  • Mukund

    • English: 45
    • Maths: 39
    • Science: 64
$('table tr').each( (tr_idx,tr) => {
  $(tr).children('td').each( (td_idx, td) => {
    $('#results ul').html('<li>' + $(td).text() + '</li>');
  });                 
});
body{font-family:Verdana;font-size:16px}
table, td{
    border:1px solid #000000;
    border-collapse:collapse;
}
td{
    padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table-1">
<tr>
  <td>Name</td>
  <td>English</td>
  <td>Maths</td>
  <td>Science</td>
</tr>
<tr>
  <td>Raj</td>
  <td>86</td>
  <td>73</td>
  <td>68</td>
</tr>
<tr>
  <td>Mukund</td>
  <td>45</td>
  <td>39</td>
  <td>64</td>
</tr>
<tr>
  <td>Bhairav</td>
  <td>85</td>
  <td>93</td>
  <td>79</td>
</tr>
<tr>
  <td>Bhairav</td>
  <td>85</td>
  <td>93</td>
  <td>79</td>
</tr>
</table>

<div id="results">
<h3>
Information
</h3>
<ul>

</ul>
</div>
Tags:

2

Answers


  1. 0

    You need to nest the LIs

    NOTE: I wrapped the header in THEAD and the body in TBODY to have valid HTML, which also is easier to parse

    I made two versions with some CSS

    const $ul = $('#results ul')
const subjects = $('table thead th').map(function() {
  return $(this).text()
}).get().slice(1);
$('table tbody tr').each((tr_idx, tr) => {
  const [name, ...grades] = $(tr).find('td').map(function() {
    return $(this).text();
  }).get();
  $ul.append(`
  <li>
    ${name}
    <ul>
      ${subjects.map((subject, i) => `<li>${subject}: ${grades[i]}</li>`).join('')}
    </ul>
  </li>
`);
});

   // alternative to align the grades
$('table tbody tr').each((tr_idx, tr) => {
  const [name, ...grades] = $(tr).find('td').map(function() {
    return $(this).text();
  }).get();
  $ul.append(`
  <li>
    ${name}
    <ul class="grade-list">
      ${subjects.map((subject, i) => `<li class="grade-item">${subject}: <span>${grades[i]}</span></li>`).join('')}
    </ul>
  </li>
`);
});
    body {
  font-family: Verdana;
  font-size: 16px
}

table,
td {
  border: 1px solid #000000;
  border-collapse: collapse;
}

td {
  padding: 5px;
}

.grade-list {
  list-style-type: none;
  /* Remove bullet points */
  padding: 0;
}

.grade-item {
  display: flex;
  justify-content: space-between;
  max-width: 200px;
  margin: 5px 0;
  padding: 2px 5px;
  background-color: #f9f9f9;
  border-radius: 5px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table-1">
  <thead>
    <tr>
      <th>Name</th>
      <th>English</th>
      <th>Maths</th>
      <th>Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Raj</td>
      <td>86</td>
      <td>73</td>
      <td>68</td>
    </tr>
    <tr>
      <td>Mukund</td>
      <td>45</td>
      <td>39</td>
      <td>64</td>
    </tr>
    <tr>
      <td>Bhairav</td>
      <td>85</td>
      <td>93</td>
      <td>79</td>
    </tr>
    <tr>
      <td>Bhairav</td>
      <td>85</td>
      <td>93</td>
      <td>79</td>
    </tr>
  </tbody>
</table>

<div id="results">
  <h3>
    Information
  </h3>
  <ul>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    Vanilla JS solution:

    const table = document.querySelector('.table-1');
const ul = document.querySelector('#results ul');

const persons = [...table.querySelectorAll('tbody td:first-child')].map(cell => cell.textContent);
const [, ...topics] = [...table.querySelectorAll('thead td')].map(cell => cell.textContent);

persons.forEach((person, pIndex) => {
      const li = Object.assign(document.createElement('li'), {
        textContent: person
      });
      const topicList = document.createElement('ul');
      topics.forEach((topic, tIndex) => {
        const topicEntry = Object.assign(document.createElement('li'), {
          textContent: `${topic}: ` + table.querySelector(`tbody tr:nth-child(${pIndex+1}) td:nth-child(${tIndex+2})`).textContent
        });
        topicList.append(topicEntry);
      });
      ul.appendChild(li).appendChild(topicList);
      });
    body {
  font-family: Verdana;
  font-size: 16px
}

table,
td {
  border: 1px solid #000000;
  border-collapse: collapse;
}

td {
  padding: 5px;
}
    <table class="table-1">
  <thead>
    <tr>
      <td>Name</td>
      <td>English</td>
      <td>Maths</td>
      <td>Science</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Raj</td>
      <td>86</td>
      <td>73</td>
      <td>68</td>
    </tr>
    <tr>
      <td>Mukund</td>
      <td>45</td>
      <td>39</td>
      <td>64</td>
    </tr>
    <tr>
      <td>Bhairav</td>
      <td>85</td>
      <td>93</td>
      <td>79</td>
    </tr>
    <tr>
      <td>Bhairav</td>
      <td>85</td>
      <td>93</td>
      <td>79</td>
    </tr>
  </tbody>
</table>

<div id="results">
  <h3>
    Information
  </h3>
  <ul>

  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search