31371

Set width of td depending on No of td using jquery

I have several web pages with different amount of tables with different amount of columns.

I was looking on the net for a jquery spinet which gets the number of columns of the table and depending on the number of columns will define the width of each column.

Ex.

if (noOfTdOnTable == 2) { tdWidth = "50%"; } if (noOfTdOnTable == 3) { td1Width = "40%"; td2Width = "40%"; td3Width = "20%"; } if (noOfTdOnTable == 4) { td1Width = "35%"; td2Width = "25%"; td3Width = "15%"; td4Width = "15%"; }

<strong>Update</strong>

Using the only answer I was given I have this at the moment but only works when there is one table on the page and I could not figure out how to apply when there are two columns.

var num = $("table > td").length; if (num % 4 == 0) { $("table > td:eq(0)").css("width", "50%"); $("table > td:eq(1)").css("width", "30%"); $("table > td:eq(2)").css("width", "10%"); $("table > td:eq(3)").css("width", "10%"); } if (num % 3 == 0) { $("table > td:eq(0)").css("width", "50%"); $("table > td:eq(1)").css("width", "40%"); $("table > td:eq(2)").css("width", "10%"); }

This is an example of the html, but the code will apply to lots of pages with different No of Tables but all tables will have either 2,3 or 4 columns.

<html> <table> <tr> <td>text</td> <td>text</td> <td>text</td> </tr> </table> <table> <tr> <td>text</td> <td>text</td> </tr> </table> <table> <tr> <td>text</td> <td>text</td> <td>text</td> <td>text</td> </tr> </table> </html>

Answer1:

To get the number of columns:

var num = $("#table > tr > td").length;

To specify the width:

$("#table > tr > td").width(w + "px");

I hope this was what you were looking for

<strong>Edit:</strong>

To specify the width to a specific column:

//if you've specified an id to each td

$("#td1").width(td1Width+"px");

//if you just use classes to identify them

$("td.td1", "#table1").width(td1Width+"px");

I would also recommend you to look into find() and end() to select columns in an efficient way. since making a $() call is a more expensive operation:

$("#table1").find("#td1").width(td1Width+"px").end().find("#td2")...

<strong>Edit 2</strong>

try this instead

$("table > tr > td:eq(0)").css("width", "50%");

or even better

$("table > tr > td").eq(0).css("width", "50%").end() .eq(1).css(...etc;

"table" will select all tables on the page; use id or class to identify which table you require.

<strong>Edit 3 (final!!)</strong>

Ok, now i can see all the code i can give a better answer. try this:

var num; var $tds; $("table").each(function(i, t) { $tds = $("td", t); num = $tds.length; if (num % 4 == 0) { $tds.eq(0).css("width", "50%").end() .eq(1).css("width", "30%").end() .eq(2).css("width", "10%").end() .eq(3).css("width", "10%"); } if (num % 3 == 0) { //etc } });

I hope this is a better answer :)

Recommend

  • Normalize blocks/sub-matrices within a matrix
  • SQL Server Cast and Rounding
  • Angular 2 set and bind checkboxes with a ngFor
  • Cannot convert a char value to money. The char value has incorrect syntax
  • Is there a chance to get -splash: work for SWT applications that require -XstartOnFirstThread?
  • include dlls in visual studio c++ 2008
  • how to get username into sql trigger when multiple users signed on from asp membership
  • R Split data.frame using a column that represents and on/off switch
  • Custom validator control occupying space even though display set to dynamic
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • htaccess rewriting URLs with multiple forward slashes
  • Display Images one by one with next and previous functionality
  • Large data - storage and query
  • Web-crawler for facebook in python
  • Jquery - Jquery Wysiwyg return html as a string
  • Apache 2.4 - remove | delete | uninstall
  • WOWZA + RTMP + HTML5 Playback?
  • Arrays break string types in Julia
  • A cron job substitute?
  • How to delete a row from a dynamic generate table using jquery?
  • Python: how to group similar lists together in a list of lists?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Codeigniter doesn't let me update entry, because some fields must be unique
  • WPF Applying a trigger on binding failure
  • Free memory of cv::Mat loaded using FileStorage API
  • Trying to get generic when generic is not available
  • Getting Messege Twice Using IMvxMessenger
  • Java static initializers and reflection
  • Change div Background jquery
  • How to get Windows thread pool to call class member function?
  • Bitwise OR returns boolean when one of operands is nil
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?