JSON formattation of an HTML table - javascript

I'm using lightswitch's script to get an HTML table codified into JSON string (https://github.com/lightswitch05/table-to-json). The problem is that, when i alert the result string (with JSON.stringify(data)), the JSON records start from the 13th column, and then goes on til the end, and continues then from the 1st column to the 12th. I don't understand why, this script appears to work properly on every table, but not on mine:
<div contenteditable>
<table id="input">
<tr id="start">
<th contenteditable="false">00</th>
<th contenteditable="false">00</th>
<th contenteditable="false">00</th>
<th contenteditable="false">01</th>
<th contenteditable="false">02</th>
<th contenteditable="false">03</th>
<th contenteditable="false">04</th>
<th contenteditable="false">05</th>
<th contenteditable="false">06</th>
<th contenteditable="false">07</th>
<th contenteditable="false">08</th>
<th contenteditable="false">09</th>
<th contenteditable="false">10</th>
<th contenteditable="false">11</th>
<th contenteditable="false">12</th>
<th contenteditable="false">13</th>
<th contenteditable="false">14</th>
<th contenteditable="false">15</th>
<th contenteditable="false">16</th>
<th contenteditable="false">17</th>
<th contenteditable="false">18</th>
<th contenteditable="false">19</th>
<th contenteditable="false">20</th>
<th contenteditable="false">21</th>
<th contenteditable="false">22</th>
<th contenteditable="false">23</th>
<th contenteditable="false">24</th>
<th contenteditable="false">25</th>
<th contenteditable="false">26</th>
<th contenteditable="false">27</th>
<th contenteditable="false">28</th>
<th contenteditable="false">29</th>
<th contenteditable="false">30</th>
<th contenteditable="false">31</th>
<th contenteditable="false">32</th>
<th contenteditable="false">33</th>
<th contenteditable="false">34</th>
<th contenteditable="false">35</th>
<th contenteditable="false">36</th>
<th contenteditable="false">37</th>
<th contenteditable="false">38</th>
<th contenteditable="false">39</th>
<th contenteditable="false">40</th>
<th contenteditable="false">41</th>
<th contenteditable="false">42</th>
<th contenteditable="false">43</th>
<th contenteditable="false">44</th>
<th contenteditable="false">45</th>
<th contenteditable="false">46</th>
<th contenteditable="false">47</th>
<th contenteditable="false">48</th>
<th contenteditable="false">49</th>
<th contenteditable="false">50</th>
<th contenteditable="false">51</th>
<th contenteditable="false">52</th>
</tr>
<tr>
<td contenteditable="false">2nd row</td>
<td contenteditable="false">false data</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td>8</td>
<td></td>
<td>7</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>6</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>8</td>
<td>8</td>
<td></td>
<td>8</td>
<td>8</td>
<td></td>
<td>8</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
and so on for all the other rows.
I need to save this table in JSON format in order to store the JSON on a database and save modified data. Then also, how to get back the table from JSON?

You are using JSON.stringify so you need to take following into consideration:
Properties of non-array objects are not guaranteed to be stringified
in any particular order. Do not rely on ordering of properties within
the same object within the stringification.
But is it really a problem? Once you send data to server you can order it anyway you want.

First of all, you need to correctly write HTML (close table and div tags etc.). Then I would suggest you treat HTML as XML and maybe this would be helpful:
Convert XML to JSON (and back) using Javascript

Related

How can I put another content under each row in my table? [duplicate]

This question already has answers here:
Hide div by default and show it on click with bootstrap
(4 answers)
Closed 1 year ago.
I Googled a lot but I can't find something for my case. I have a Bootstrap table where I want on click on my rows to show additional info for the main row.
I can't find a way to do this.
I have this code:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
And if I try this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
Then my table is broken.
How can I achieve this - on click show additional info for each of my rows?
Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.

Get Value of nearest HTML thead element when clicking on td cell

I have an HTML table which looks like this:
jQuery(document).ready(function($) {
$('#reservationtable tbody tr td').on('click', function () {
var reservationtime = $( this ).siblings('th').text();
var header = $(this).next('.theader-text-nonstrong').val();
$('#modalvon').text(reservationtime);
$('#modalbis').text(addMinutes(reservationtime, '60'));
$('#modaldatum').text(header);
$("#confirmreservierung").modal("show");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-sm res-table" id="reservationtable">
<thead>
<tr>
<th scope="col" class="theader-text td-border-right"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l") . "</span><br>" . date("d.m.Y"); ?></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+1 day")). "</span><br>" . date("d.m.Y", strtotime("+1 day")); ?></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+2 day")). "</span><br>" . date("d.m.Y", strtotime("+2 day")); ?></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+3 day")). "</span><br>" . date("d.m.Y", strtotime("+3 day")); ?></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col" class="td-border-right">Zeit</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
</tr>
<tr>
<th scope="row" class="td-border-right">08:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">09:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">10:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">11:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">12:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">13:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">14:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">15:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">16:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">17:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">18:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">19:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">20:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
</tbody>
</table>
Also, I have a jquery method which handles the event when a user clicks on a td in the table:
As you can see I want to load data inside the bootstrap modal. I want to get the value from the column header of the td which was clicked. Especially I want to get the value out of the span with the 'theater-text-nonstrong' class. The current method only gets me a null value.
Thank you for your help!
Since you have colspans involved one way is create an array for all the headings text.
On page load go through all the <th colspan> and get the colspan value and use that value to push text into the headings array for each column spanned.
Then when you click a <td> use it's index within cells on that row to get the associated heading text from the headings array
// add some cell text for demo
demoInit();
let spanHeadings = [];
$('thead th[colspan]').each(function() {
const colspan = +this.colSpan,
heading = $(this).find('.theader-text-nonstrong').text();
// create as many headings as colspan length
spanHeadings.push.apply(spanHeadings, Array(colspan).fill(heading));
});
$('#reservationtable tbody td').click(function() {
const tdIdx = $(this).index() - 1;// subtract for the left `<th>`
const heading = spanHeadings[tdIdx];
console.clear()
console.log('heading: ', heading)
});
function demoInit() {
$('td:empty').text(function(i) {
return 'Cell ' + (i + 1)
});
}
td {
border: 1px solid #ccc;
padding: 4px
}
table {
border-collapse: collapse
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-sm res-table" id="reservationtable">
<thead>
<tr>
<th scope="col" class="theader-text td-border-right"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 1</span></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 2</span><br></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 3</span><br></th>
<th scope="col" class="theader-text td-border-right" colspan="3"><span class='theader-text-nonstrong'>Span 4</span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col" class="td-border-right">Zeit</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
<th scope="col">Platz 1</th>
<th scope="col">Platz 2</th>
<th scope="col" class="td-border-right">Platz 3</th>
</tr>
<tr>
<th scope="row" class="td-border-right">08:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
<tr>
<th scope="row" class="td-border-right">09:00</th>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
<td></td>
<td></td>
<td class="td-border-right"></td>
</tr>
</tbody>
</table>

How do I enter a numeric number in sequence in a table?

There is a table that is sorted by clicking from larger to smaller values. How to make sure that the ordinal number of the value is always between 1 and 5 after sorting the table?
That is, the numerical order should always be between 1 and 5 and should not be sorted.
$(document).ready(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
Never heard of - and therefore never used - stupidtable but it doesn't look like there is a call-back event once the sorting has completed.
So instead, I've used a timeout as part of the click event.
The within the timeout finds all the first-child <td> elements, and uses the index of each to set the text of the element.
As the stupidsort code does the sort 10-milliseconds after the client event, I've had to make it 20 in the code for it to work...
$(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
// After a short period, set the values
setTimeout(function() {
$table.find("tbody tr td:first-child").each(function(i, v) {
$(this).text((i + 1).toString());
});
}, 20);
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>

How to copy rows and paste selected rows in same table

Here i want to copy rows and must be able to paste the rows below
i want to add functionality to my table as in this fiddle
http://jsfiddle.net/Lfjuapub/1/
Please find my fiddle
https://jsfiddle.net/zrcoLyeg/6/
<table id="tblColumnSchedule" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th data-sort-initial="true" data-toggle="true">User</th>
<th data-hide="phone, tablet">Label</th>
<th data-hide="phone, tablet">Profile</th>
<th data-hide="phone, tablet">Location</th>
<th data-hide="phone, tablet">Start</th>
<th data-hide="phone, tablet">End </th>
</tr>
</thead>
<tbody>
<tr>
<td>s1</td>
<td>w10x22</td>
<td>A1</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>s2</td>
<td>w10x24</td>
<td>A1.1</td>
<td>20</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
For example if i select 2 rows cloumns like Location, Start , End,
i must be able to paste selected rows in 3 rows.
Any help is highly appiceable.
Try using an external library like handsontable.

How to make a html-table sortable while not sorting specific rows?

I have a html-table, that has a header, that is supposed to be clickable to sort the rows on the clicked column. The tricky part here is, that there are some rows in the table, that shouldn't be sorted and the rows, that belong to that specific row should remain under that row. Here is some code so you get what I'm talking about.
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>
</table>
So if I click for example on the Item-Header, the Apple + Pineapple rows should remain between the Peter and the Stan row while being sorted. If I click on the User-Header, Peter and Stan should be sorted, while the Items Apple + Pineapple remain under the Peter row and the Banana and Orange Items remain under the Stan row ... I hope you get what I mean.
I have already tried it with the jquery tablesorter-plugin but I couldn't find any solution that was working for me.
You'll need to enclose each block of rows in a separate tbody.
Then clicking on User will only sort the tbodys, and clicking on the other ths will sort each tbody separately.
EDIT
The table should look like this:
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>

Categories