Hi I am generating a table dynamically and adding new TR and TD to it dynamically in the following manner.
$('#tableId').append('<tr><th colspan="2"></th>');
The above code is called only once in my code.
Then I am adding TD to it in the following manner:
var tempurl = 'http://google.com';
$('<td>').appendTo($('#tableId')).html("<a href='"+tempurl+"'>"+tempurl+"</a>");
The problem that I am facing is, all TD are getting aligned in one row(in the same line only) and my page width get increased by many times.
I tried adding css to table so that if table size exceed TD should go to next line:
max-width: 90%;
display: block;
and
display: inline;
but it is not working out for me.
Please code a correct static HTML table and then use this code to generate dynamically a still correct table.
Here's an example of such a table:
<table>
<caption>Google results</caption>
<thead>
<tr>
<th scope="col">Title and link</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Stack Overflow
</td>
<td>Stack Overflow is a website (...)</td>
</tr>
<tr>
<td>
Stack Exchange
</td>
<td>Stack Exchange is a website (...)</td>
</tr>
</tbody>
</table>
no need for a header cell spanning all rows: you probably intend it as a caption
in a vertical table, you should have a header cell (th) on top of each column, in thead element (I added scope="col" attribute for accessibility reasons. It'd be row if header cells were on left of each row. Don't use scope if you've colspan or rowspan somewhere)
in tbody element, one row (tr) per actual row
in each row, as many td elements as there are header cells (except if there are some colspan or rowspan)
EDIT: why do you have 2 different id? Confusing.
Related
In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).
Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog
You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");
My table headers are much wider than the data in the table, so I am trying to rotate the text in the headers to save space.
I've been trying out the suggestions in this question, and I've also taken a look at this and this.
However, none of the answers seem to actually work: here is my attempt in a JSFiddle.
The text can rotate, but the <th> elements don't resize properly, which was the whole point of trying to rotate the text.
Now that it's been 2-4 years since those questions have been asked, are there any new solutions to this problem?
You could use CSS to select the thead and size the rows accordingly:
DEMO: http://jsfiddle.net/uo44ub6L/
CSS:
thead th {
height: 130px;
}
Another method would be to use rowspan="5" to create a larger th but you would need to add some blank rows, and you would get the same effect. Either would work.
If you need to do this dynamically, you could use javascript to select the th and adjust the size on the span length and font size.
You can use
writing-mode: vertical-rl; text-orientation: mixed;
this will get the work done for you , Here is JSFiddle of it .
This is now possible without any browser specific transforms that you used in your attempt. Note that the wrapping span is required as of 2022 in order to get firefox in particular to center the rotated text within the column (webkit does this by default). I also suggest you rotate the text at a slight angle as demonstrated here as it (IMHO) makes it easier to read.
<style type="text/css">
#myTable td {
text-align: right;
}
th.r span {
transform: rotate(185deg);
writing-mode: vertical-lr;
}
</style>
<table id="myTable" border="1" cellpadding="2" style="border-collapse:collapse;">
<tr>
<th class='r'><span>Display</span></th>
<th class='r'><span>Year made (TV?)</span></th>
<th class='r'><span>Native Res</span></th>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);">Dell U2410 (game) </td>
<td>2010</td>
<td>1080p</td>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);">Dell U2410 (sRGB)</td>
<td>2010</td>
<td>1080p</td>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);"> Sony 40VL130 (game)</td>
<td style="color:rgb(0, 0, 255);">2008</td>
<td>1080p</td>
</tr>
</table>
I have a table which is populated by some JS on opening and as part of that, section headings are given a column span across the whole table as well as a classname of "section". I verified this by an alert in the onmouseover hook for the tr elements which echoed the classname. The classname definitely takes.
I have some CSS like this...
tr:hover {
background-color: #FF9966
}
thead tr:hover, tr.section:hover {background-color: #DACFE5;!important}
The roll-over works fine and excludes the thead children, but I cant get it to exclude "section" class tr's.
What syntax do I need in the CSS to achieve this?
The table template is...
<table id="myTable" border="1" class="indent">
<thead>
<tr>
<th colspan="3">Joe's Cafe Menu</th>
</tr>
<tr>
<th>Select</th>
<th>Item</th>
<th>Price</th>
<tr>
</thead>
<tbody>
</tbody>
</table>
EDIT:
Problem was case sensitivity.
A rookie error I guess.
classname was being echoed in the alert but the member referenced by the CSS is className. I fixed that and now its fine.
This CSS works like a charm...
tbody tr:not(.section):hover {
background-color: #FF9966
}
For reasons I don't understand, this CSS fails to exclude the header...
tr:not(.section):hover {
background-color: #FF9966
}
thead tr:hover td {background-color: #DACFE5;}
Which is academic really since its a bit of a hack.
tr:not(.section):hover {
background-color: #FF9966
}
I just try a table with <ol> as list elements with which it is possible to insert new table row.
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody>
<ol id="list">
<li><tr><td>row</td><td>row</td><td>row</td></tr></li>
</ol>
</tbody>
However, I have the problem that the element appear outside of my tables. When I add dynamically content via .append(), the formatting is not taken some elements gets removed.
Jsfiddle example
I want to use this solution for counting currently positions in an "container list".
I got a similar function like the example below for counting my lists, that's working great but the insert into the table does not work properly.
countinglists example: Nested ordered lists
Maybe its possible to achieve that counting syntax in a table without the <ol>? or is there any <ol> equivalent?
You need to do some reading on basic HTML: http://www.w3schools.com/html/html_tables.asp
Here is how it should look...
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody id="list">
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
</tbody>
In theory, you should be able to use CSS counters.
table {
counter-reset: myTableCounter;
}
thead th:first-child:before {
display: table-cell;
content: "";
}
tbody td:first-child:before {
display: table-cell;
counter-increment: myTableCounter;
content: counter(myTableCounter);
}
However, when I attempted to do that I found there were issues with display: table-cell generated content.
You may have to look at adding additional elements to the table to generate the content inside the first cell of each row.
My question is: what are you trying to achieve? Is this an exercise just to see how much can you stretch the HTML?
For your jsfiddle, the action associated to the click removes some of the HTML tags (at least on my browser) resulting in a <li>rowrowrow</li>, so you end up having a rather odd formatted-table. My renderer takes all <li> tags added by clicking as the content of a row; if you have only <li> tags, the dom parser will likely wrap them into a <ul> (it does on mine).
IMHO you don't need to use the ol to be able to count stuff. You can do it in jquery afaik. If you insist to use lists, then you probably need to style them and use e.g. divs inside (styled too). Emulating a table via a list and divs is madness imho :)
Update - for the hierarchical table
My idea would be to have something similar to this jsfiddle. I basically styled in the .sub and the .main classes. However, things get a bit more complex is you need to add some extra columns. In this case, you'd need something like a treetable.
Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.
Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?
My table structure is pretty simple.
<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
what you are searching for is a attribute for the tag and it is called rules:
http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html
<table rules="cols">
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
You can style it using the css border properties. But the advantage over using a border on every cell is the fact that it will not add a border at the right side of the table (or the last cell actually) so you don't have to add a special class to the last cell to overwrite the border.
EDIT: Add the attribute border="0" to the tag if you don't want a border around the whole table (or not left/right of the first/last column).
EXAMPLE: http://jsbin.com/ixire
Using the cell border is one option you can use but there's another:
I'm not sure if you can change your table structure but if you can, use the colgroup and col tags for table. I did a quick test in latest of FF, Chrome and Opera and it worked in all:
<style type="text/css">
table {
border:1px solid #ccc;
border-collapse:collapse;
}
.col {
border-right:10px solid blue;
}
</style>
<div id="tDiv">
<table border="1">
<colgroup class="col">
<col width="200" />
</colgroup>
<colgroup class="col">
<col width="200" />
</colgroup>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>one one</td>
<td>one two</td>
</tr>
</tbody>
</table>
</div>
I did not get a change to test in IE (any versions of it) though.
Generally done with border on the right (or left) of each cell.
This -> http://jsfiddle.net/XFtBR/ should give you a start point.