I'm trying to dynamically create a table from js, although I do know the exact width and height of the table, I do not know the actual width of table cell. I know that it is possible to find the width of the each cell, but I was wondering if you can actually lock it without specifying the width of the cell.
Link to jsfiddle:
http://jsfiddle.net/j3TEz/21/
My js file:
window.addEventListener('load',init,false);
function init(){
var table = document.getElementById('myTable');
var tr = 3;
var td=5;
var innerTable = '';
for(var trCounter=0;trCounter<tr;trCounter++){
innerTable+='<tr>';
for(var tdCounter=0;tdCounter<td;tdCounter++){
var id=(trCounter*td)+tdCounter;
innerTable+='<td id="'+id+'" onclick="addText('+id+')"></td>';
}
innerTable+='</tr>';
}
table.style.width="600px";
table.style.height="300px";
table.style.border="1px solid black";
table.innerHTML=innerTable;
}
function addText(id){
document.getElementById(id).innerHTML="Lorem Ipsum";
}
Css table-layout set to fixed will keep the columns width fixed, the size will be determined by the first row columns.
Hope this help.
Related
I am generating a simple html-table and would like columns of different widths in the same row. However when I try to set the width either with pixels or with %, there is no change in the display. Also, the first column ('td' element) added is always much wider than other columns added later. I have tried setting the width after creating an element and before appending it as a child node as well as setting the width only after appending the element as a child node. Here is an example of what I have tried:
var tr = document.createElement('TR');
tr.style.margin = "50px"
//scoring column
var td0 = document.createElement('TD')
td0.style.padding = '1em'
td0.style.width = '2px'
var tr11 = document.createElement('TR');
tr11.style.margin = "50px"
tr11.innerHTML ="score: " + ascore_array[i + offset];
var tr22 = document.createElement('TR');
tr22.style.margin = "50px"
tr22.innerHTML ="num votes: " + anumVotes_array[i + offset];
td0.appendChild(tr11)
td0.appendChild(tr22)
//answer column
var td1 = document.createElement('TD')
td1.style.padding = "1em"
td1.innerHTML = auser_array[i + offset]
tr.appendChild(td0)
td0.style.width = "20%"
tr.appendChild(td1)
td1.style.width = "30%"
As you can see in the code above, I have tried both px and % as units of width. I have also tried setting the width both before and after setting an element as a child node. There is no change in my code. Also, I am using css templates, but they only set default background colors for my table elements. There is nothing in the css to regular td element sizing. Also I have tried resizing the tr elements within the td elements but this also has no effect.
I am using Chrome as my browser.
What am I doing wrong and how can I fix it?
Ok I think I see what the problem is. There is a <col style="width: 80%;"> and a <col style="width: 20%;"> inbetween the root <table> and <tbody> which is overriding your styles in the <td> below
maybe this can help you
var cell = document.createElement('td');
parent.appendChild(cell);
cell.style.width = '200px';
http://jsfiddle.net/ZvEDn/1/รง
here is the question where i found it
how to set cell width in javascript just after creating it with 'document.createElement()' method?
I have a table cell in which other tables are displayed (with background colors). The inner tables aren't always shown; they can be hidden via a button (change class with jQuery). Now I want the outer cell to always be filled with color. That means if only one table is displayed, its width should be 100%. When two are displayed, each width should be 50%, and so on.
How am I supposed to solve this?
Here's an example:
...
<td>
<table class="show"><tr><td></td></tr></table>
<table class=""><tr><td></td></tr></table>
<table class="show"><tr><td></td></tr></table>
</td>
...
In this case, the width should be 50%
You can change the width value with Jquery.
var count_table = $(".show").length; // count ".show" elements
$(".show").each(function{ // iteration on each ".show"
var width = 100/count_table; // % value of new width
$(this).css("width", width+"%"); // CSS modification
});
This code is just adapted for one TD element. You need to iterate on each "td" too.
(I hope I answered your problem)
To change the width of your elements you can use jquery.
Here's the page explaining how.
Here is another way: http://jsfiddle.net/ypJDz/1
A bit too complicated for what you need, but a great deal of possibility to expand.
function resizeTables() {
var baby = $("td > table.show"),
amount = baby.length,
mother = $("body");
baby.width(function () {
var w = mother.width() / amount;
return w;
});
}
resizeTables();
$("button").click(function () {
var $this = $(this),
ID = $this.index() + 1;
$("td > table:nth-child(" + ID + ")").toggleClass("show");
resizeTables();
});
I've written a short method to append rows to a table. It is as follows:
/*--------------------------------------------------*/
/* Append a row to the documentation heading table. */
/*--------------------------------------------------*/
function append_heading(heading, style, default_content, node_enabled, leaf_enabled)
{
// Grab the table body.
var tbody = $("#headings_table_body");
// Generate our cells.
var headingCell = $('<td class="heading_column"></td>');
var styleCell = $('<td class="style_column"></td>');
var defaultCell = $('<td class="default_column"></td>');
var nodesCell = $('<td class="nodes_column ticked"></td>');
var leavesCell = $('<td class="leaves_column ticked"></td>');
// Fill in various cells.
headingCell.append(heading);
styleCell.append(style);
defaultCell.append(default_content);
// Tick some cells cross the others.
if(node_enabled)
{
nodesCell.addClass("ticked");
}
else
{
nodesCell.addClass("crossed");
}
if(leaf_enabled)
{
leavesCell.addClass("ticked");
}
else
{
leavesCell.addClass("crossed");
}
// Add all the cells to one big row.
var tr = $("<tr></tr>")
.append(headingCell)
.append(styleCell)
.append(defaultCell)
.append(nodesCell)
.append(leavesCell);
// Append the row to the table.
tbody.append(tr);
$(tr).hide();
$(tr).slideDown("slow");
}
It appends the rows as expected, all nicely filled out and styled. The problem is, slideDown doesn't animate: It's current behaviour is analogous to me calling hide() and show(), it simply appears. How can I get this to animate correctly? Any help is appreciated, thanks.
jQuery is NOT able to animate tables directly. All that you need is to wrap the content of each td cell in the row into div with display:none and make slideDown animation for them! To make you life easier :)))
tr.find('td').wrapInner('<div style="display: none;" />');
tr.appendTo(tbody);
tr.find('td > div')
.slideDown('slow', function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
If you want to animate the whole table, it should be placed into div with animation applied to that div.
I assume it's because it does not know the height of the appended TR, try explicitly defining the height of the TR in your CSS or amend the code to do
$(tr).height($(tr).height());
$(tr).hide();
$(tr).slideDown("slow");
I set the width of a textarea to 100%, but now I need to know how many characters can fit in one row.
I'm trying to write a javascript function to auto-grow/shrink a textarea. I'm trying to keep from using jquery since I just need this one function.
My logic is to rows = textarea.value.split('\n'), iterate through rows and count += rows[i].length/textarea.cols, then count += rows.length, and finally textarea.rows = count. The only problem is that count is too large because textarea.cols is too small.
This function will set the height of the element (textarea, in your case) to the browser's default height. If that causes a scrollbar to appear, the height will be switched to the actually needed height.
function autoHeight(element){
element.style.height='auto';
element.style.height=element.scrollHeight+'px';
}
If you don't like the browser's default height, you can change that to some other default value of your own, of course.
Try this and enjoy:
var textarea = document.getElementById("YourTextArea");
var limit = 50; //height limit
textarea.oninput = function() {
textarea.style.height = "";
textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";
};
textarea {
width: 99%;
}
<textarea id="YourTextArea"></textarea>
I have one table which display data as from Dynamic Content, I want to make table width 100% when there is 6 cols. and table width auto if less the 5 cols.
I tried with CSS but, when there is only two cols, it expand two cols to full width while have table 100% width and looks awkward.
Is there any Javascript, jQuery script available to get this result?
Using jQuery and ensuring you choose the first row in the table body in case the thead has a different layout.
function setTableWidth(tableId) {
var $tbl = $('#'+tableId);
var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto';
$tbl.width(newWidth)
}
Depending on how you're loading the dynamic content, there might be an easier way, but this function should do what you need:
function setTableWidth(tableId) {
myTable = document.getElementById('tableId');
if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5)
myTable.style.width = '100%';
else
myTable.style.width = 'auto';
}
Note though, that it won't work if any of the cells in the first row have a colspan. It's simply counting the number of columns in the first row and setting the width based on that.