Using JavaScript to Change Table Cells Width

How to set the cell width (HTML table) from Javascript code

Here's how you might do it with jQuery, a popular JavaScript library:

http://jsfiddle.net/VJTnN/2

$('td:nth-child(2)').css('width', '100px');

Using JavaScript to change table cells width

Something like this (for the first one:

document.getElementsByTagName('td')[0].style.width = '2px';

Or this for all:

var tds = document.getElementsByTagName('td');

for (var i = 0; i < tds.length; i++)
    tds[i].style.width = '2px';

increase width and height of table cells

Instead of creating an html element, you're creating a textNode in the following code:

 // Append a text node to the cell
  var newText2  = document.createTextNode('<a href="">delete</a>' +'<a href="">show</a>');
  newCell2.appendChild(newText2);

instead, you actually have to create html elements using createElement() function as follows:

 // Append a text node to the cell
 var newText2  = document.createElement('a'); //create actual HTML element
 newText2.innerHTML='show'; // set the elements properties
 newText2.href="#";
 newCell2.appendChild(newText2);

JSFiddle

this is just for demo purpose, you can actually create the remaining anchor and set all of their properties as shown above...

Update

As for changing the size, simply specify it in css as follows:

td{
 width:250px;
 height:250px;
}

JSFiddle

Update

You can set the height and width of dynamically created elements as follows:

newCell.style.width ='250px';
newCell.style.height ='250px';

For displaying an image, instead of creating an <a> simply create <img> and set it's source and do your logic on it's click event.

JSFiddle

---

Related Topics