jquery increase with of last th

Question

How to increase width of last th in a string? I am trying to make it current width + 20px;

var header="<th id="tblHeader_1" style="width: 80px;"><span>Id</span></th>
<th class="headerSortDown" id="tblHeader_2" style="width: 300px;"><span>Title</span></th>
<th class="headerSortDown" id="tblHeader_3" style="width: 300px;"><span>Adress</span></th>";


//Increase last th width
header.find(th:last).css('width',currentwidth+20+'px');    
alert(header);

You can't do jQuery actions on HTML inside a variable. It only works when the HTML is in the DOM. — Gerben Jacobs, Mar 07 '14 at 08:24
try use replace , `header.repalce('id="tblHeader_1" style="width: 80px;"','id="tblHeader_1" style="width: '+currentwidth+20+'px;"');` — Kodr.F, Mar 07 '14 at 08:27
@GerbenJacobs True, but you can convert HTML string to a jQuery object - seee Felix's answer. — Aleks G, Mar 07 '14 at 08:27

score 2 · Answer 1 · answered Mar 07 '14 at 08:23

Try to convert your header to jQuery object using $ in order to use jQuery method here:

$(header).find('th:last').css('width',currentwidth+20+'px');

Also, you need to use ' ' to wrap your string instead of " ":

var header='<th id="tblHeader_1" style="width: 80px;"><span>Id</span></th><th class="headerSortDown" id="tblHeader_2" style="width: 300px;"><span>Title</span></th><th class="headerSortDown" id="tblHeader_3" style="width: 300px;"><span>Adress</span></th>';

score 2 · Answer 2 · answered Mar 07 '14 at 08:29

2

First, you need to create a jQuery object from your HTML string, then you need to actually get the current width of the th before increasing it:

th = $(header).find('th:last');
th.css('width', (th.width() + 20) + 'px');

answered Mar 07 '14 at 08:29

Aleks G

56,435
29
168
265

score 1 · Answer 3 · answered Mar 07 '14 at 08:35

var header = $('<th id="tblHeader_1" style="width: 80px;"><span>Id</span></th><th class="headerSortDown" id="tblHeader_2" style="width: 300px;"><span>Title</span></th><th class="headerSortDown" id="tblHeader_3" style="width: 300px;"><span>Adress</span></th>');
$(header[header.length-1]).css({width:"+=20"});
alert(header);

demo here http://jsfiddle.net/sBbcE/2/

score 1 · Answer 4 · edited May 23 '17 at 12:10

LIVE DEMO filter()

Problem here JQuery find() doesn't works well with HTML String . First we need into inject into DOM then it will work fine.

It works fine with filter() method better explanation here Find element at HTML string

var header='<th id="tblHeader_1" style="width:80px;"><span>Id</span></th><th class="headerSortDown" id="tblHeader_2" style="width: 100px;"><span>Title</span></th><th class="headerSortDown" id="tblHeader_3" style="width:100px;"><span>Adress</span></th>';

var $header =  $(header);

var th = $header.filter("th:last");

th.css('width',th.width() + 50 + 'px');

$header.appendTo('#main');

Another way with find() method.

LIVE DEMO

var header='<th id="tblHeader_1" style="width:80px;"><span>Id</span></th><th class="headerSortDown" id="tblHeader_2" style="width: 100px;"><span>Title</span></th><th class="headerSortDown" id="tblHeader_3" style="width:100px;"><span>Adress</span></th>';

var currentwidth = 100;

$('#main').append(header).find('th:last').css('background-color','red');//For Testing pu

//Increase last th width
$('#main').find('th:last').css('width',currentwidth + 50 + 'px');

Please look at https://stackoverflow.com/questions/7159426/using-jquery-to-search-a-string-of-html

jquery increase with of last th

4 Answers4