Printing a table as two parts in Javascript - javascript

I should print a table, but Table doesn't fit paper. I have to print as two parts. how do I do?
Please help me.

Using the THEAD, TFOOT, and TBODY elements may solve the problem without the need for javascript. Here's a quote from the W3C documentation:
Table rows may be grouped into a table
head, table foot, and one or more
table body sections, using the THEAD,
TFOOT and TBODY elements,
respectively. This division enables
user agents to support scrolling of
table bodies independently of the
table head and foot. When long tables
are printed, the table head and foot
information may be repeated on each
page that contains table data.
Note that, if included, tfoot must come before tbody:
<table>
<thead>
<tr>
<th>Col 1 heading</th>
<th>Col 2 heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Col 1 footer</th>
<th>Col 2 footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
</tbody>
</table>
The rows in thead should be repeated at the top of the table on each page when the table is printed. Similarly, the rows in tfoot, if included, should be printed at the bottom of the table on each page when the table is printed. It's up to the user agent (e.g., the browser) to do this, but I think most modern browsers handle this properly - it's not something I've ever tested though. I'd be interested to know how you get on.

Related

ASP.net Razor app: Using Bootstrap, CSS or JS, is there an easy way to move an entire table column left and right? Reorder the columns on the fly

I have requirements to take a HTML table and dynamically move the columns when the user clicks a left/right caret on the column header.
Is this impossible? Feels like a big lift.
I would appreciate any pointers implementing this functionality. Thanks.
Here's a basic method to loop through each cell and move it in front of the previous cell.
There's very likely a fancier/shorter way to do this, but knowing a basic method can always help you understand/develop the fancier methods.
Breakdown:
$("table>thead>tr,table>tbody>tr").each
loop through both thead and tbody, could also do $("table tr") but that may not work if you have nested tables
$(this).find("th,td").eq(2).each(
Here this is the tr from the previous each, find child th and td then only the 3rd column (0-based).
$(this).insertBefore($(this).prev());
now this is the th/td from the previous each, take this cell (3rd column) and move it in front of the previous cell.
Snippet:
$("button").click(() =>
$("table>thead>tr,table>tbody>tr").each(function() {
$(this).find("th,td").eq(2).each(function() {
$(this).insertBefore($(this).prev());
});
})
);
table, th, td {
border: 1px solid #CCC;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1 1</td>
<td>cell 1 2</td>
<td>cell 1 3</td>
</tr>
<tr>
<td>cell 2 1</td>
<td>cell 2 2</td>
<td>cell 2 3</td>
</tr>
</tbody>
</table>
<button type='button' id='clickme'>click me</button>

Hiding some columns if table is too big

I am a beginner in react and web apps in general let me know if anything is unclear.
I have the following table :
<div>
<table id="mytableid" className="some classes">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone Number</th>
<th>Age</th>
<th>Sex</th>
<th>Blood Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Some place somewhere</td>
<td>093-1252-4879</td>
<td>51</td>
<td>Male</td>
<td>AB</td>
</tr>
</tbody>
</table>
</div>
Let's say I want to hide Address and blood type if table is too big to fit in a div.
The way I am thinking of doing this is to check the size of the div and the table in componentDidMount
if the size of the table is bigger than the div then I will set the style of those two columns to display:none.
I did something similar for submenu transitions where I would change my component set on the componentDidMount to get the height then put the visibility to hidden by changing the state. I didn't notice any slowness neither can I see that the submenu was actually visible(on chrome)
I saw some people are doing things like for the nth column to not be displayed if the screen is too small using purely css which is nice. But in my case I am not sure if I could do something similar as I would like the user of my component to specify which columns to hide.
My question is if it is the usual way for webapp developers to display the component check the result on componentDidMount and then change how things look or is there a different pattern?
The one pattern I have seen is, removing items on demand in such cases, i.e. user has choice of which columns to see and which one to hide. Refer this dynamic-columns example from an open source.
http://uikernel.io/examples/dynamic-columns/

Dynamically break down table td into individual tr's

I have a table that I am trying to make mobile friendly see below:
<tbody>
<tr>
<td>one</td>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>two</td>
</tr>
</tbody>
I'm looking to create single columns of this table so it can be display better on mobile.
Conceptually I'm thinking to ad an /tr after each /td excluding /td:last of types
My tables are dynamically generated, so it needs to dynamic solution, anyone have anythoughts on how to approach this?
Below is what the resulting table would ideally look like.
<tbody>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
</tbody>
<tbody>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
</tbody>
You could achieve the same look with CSS and media queries:
#media (max-width: 400px) { /* or whatever you want your mobile breakpoint to be */
tr, td { float:left; width:100%; }
}
http://jsfiddle.net/nWPzp/
If you're not displaying tabular data I find my preference is to stay away from tables and use lists/divs instead. That being said here are some examples of "Responsive Tables" that do contain tabular data:
http://css-tricks.com/responsive-data-table-roundup/
As pointed out a lot of them are css tricks.
Try JS. Use getElementById. Write:
document.getElementById("dynamic").innerHTML="new code"

Creating merged table cells using Twitter Bootstrap

How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?
Here's how it looks like in Excel:
I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:
You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.
Break up your table headers into rows, according to their levels.
So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.
Your first row should have 3 columns: State, Utilities Company and Summer Period.
Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.
Let's apply the attributes:
Your 1st th for State spans 2 rows, so we add rowspan="2".
The same applies to the next table header, Utilities Company.
Summer Period spans 1 row and 3 columns, so we add colspan="3"
Add another tr in the header, containing the 3 cells for data1, data2 and data3.
The resulting HTML looks like this:
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
Here is a demo fiddle.
Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.
Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:
<table class="table table-bordered">
<thread>
<tr>
<th>State</th>
<th>Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th></th>
<th></th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>
You may have to add some CSS between your first and second header row to display your data correctly
<table class="table table-bordered">
<thread>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>

Iterating through table rows in nested divs

I have a page that contains a couple of layers of nested div tags. Within the the 8 or 9 of the divs are tables. How do I iterate through the divs and pick the specific divs that I want and then iterate through the cells in the table (one row) embedded in each of the divs? Here is a representative sample of the page that I want to iterate through.
<div id="TheHouseDiv" class="catbox_m">
<div class="Room1Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
<td>THIS CELL I WANT ALSO</td>
<tr>
</tbody>
</table>
<table width="900" border="0">
<tbody>
<tr>
<td>Ignore this value in the second table</td>
<td>I WANT THIS VALUE</td>
<td>I WANT THIS VALUE TOO</td>
<td>Ignore this content</td>
<td>GET THIS CELL VALUE</td>
<tr>
</tbody>
</table>
</div>
<div class="Room2Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
...
You get the idea. So there is one table within each div and multiple divs. There are actually between 8 and 10 divs. None of the tables or cells have IDs so I need to reference the positionally. However I don't want all of the cell nor all of the tables. I only want values from specific cells in each of the tables within each div although I want the same cells from every table. Would I iterate through this or just reference the specific cells I want and if so, how do I select them?
This gives you all the tds which you want. (if you don't understand the selector just post a comment and I will explain it.
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4))")
e.g. to loop over the hrefs of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert(ele.href);
}
);
e.g. to loop over the text of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert($(ele).text()); //or ele.innerHTML if no nasty is in the <a> tags
}
);
$('#TheHouseDiv div').eq(1).find('table').eq(2).find('tr').eq(3).find('td').eq(4).text()
A bit verbose, but I believe this retrieves the text of the 4th <td> inside the 3rd <tr> of the 2nd <table> from the first <div> contained in #TheHouseDiv.
You can also use the shortcut .find('tr:first') to match the first one.

Categories

Resources