CODEWITHSUNDEEP
javascriptjquerysplithtml-table
hansolo22
hansolo22

Reputation: 1

Split Table into Individual Tables with One Row with Javascript

I would like to split this entire table into three sub tables using Javascript. Each table should retain it's header information.

I cannot adjust the id's or classes as they are generated by a web application, so I need to make do with what is available.

I've been trying to crack this with Jfiddle for quite awhile and am getting frustrated. I'm pretty new to Javascript, but can't image this would require a lot of code. If anyone knows how to split this apart by row size as well (i.e. Split Table up, but selectively), that would be appreciated as well.

I'm limited to Javascript and Jquery 1.7.

<div id="serviceArray">
    <table border="1" class="array vertical-array">
        <thead>
            <tr>
                <th>#</th>
                <th>Savings</th>
                <th>Expenses</th>
                <th>Savings</th>
                <th>Expenses</th>
                <th>Savings</th>
                <th>Expenses</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Sum</td>
                <td>$180</td>
                <td>$500</td>
                <td>$300</td>
                <td>$700</td>
                <td>$600</td>
                <td>$1000</td>
            </tr>
            <tr>
                <td>Home</td>
                <td>$100</td>
                <td>$200</td>
                <td>$200</td>
                <td>$300</td>
                <td>$400</td>
                <td>$500</td>
            </tr>
            <tr>
                <td>Work</td>
                <td>$80</td>
                <td>$300</td>
                <td>$100</td>
                <td>$400</td>
                <td>$200</td>
                <td>$500</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 0

Views: 4114

Answers (2)

Abdul Majid Bajwa
Abdul Majid Bajwa

Reputation: 159

You can use simple Javascript for table creation and it will generate rows according to your returned response from api.

var tableHeader = this.responseJsonData.Table_Headers;
var tableData = this.responseJsonData.Table_Data;

let table = document.querySelector("table");

function generateTableHead(table, data) {
//alert("In Table Head");
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}
function generateTable(table, data) {
//  alert("In Generate Head");
    for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}

Upvotes: 0

PSL
PSL

Reputation: 123739

Did you mean like this?

   var tables = $('#serviceArray table tbody tr').map(function () { //For each row
   var $els = $(this).closest('tbody') //go to its parent tbody
              .siblings('thead').add(   //fetch thead 
                         $(this)  //and add itself (tr) 
                           .wrap($('<tbody/>')) //wrapping itself in tbody
                           .closest('tbody')); //get itself with its tbody wrapper
        return $els.clone()        //clone the above created steps , i.e thead and tbody with one tr
                    .wrapAll($('<table/>', {     //wrap them all to a new table with 
                          'border': '1',         //attributes.
                          'class': 'array vertical-array'
                    })
                ).closest('table');   //get the new table

   }).get();

$('#serviceArray table').remove();

$('body').append(tables);  //append all to the table.

Demo

Or just simply clone the table and remove all other trs from tbody except this one and add it to DOM (Much Shorter Solution).

var tables = $('#serviceArray table tbody tr').map(function (idx) {
    var $table = $(this).closest('table').clone().find('tbody tr:not(:eq(' + idx + '))').remove().end();
    return $table;
}).get();

Demo

Each of the methods used has documentation available in web and you can use this to work out something yourself to what you need.

Upvotes: 2

Related Questions