CODEWITHSUNDEEP
jqueryasp.net
NewBie
NewBie

Reputation: 1844

How to set the width of a column using jquery?

How can i set the width of a table column using jquery. The code provided below is not working. Please help.

  function addColumn(column) 
  {
    var iHtml;
    iHtml = "<tr><td  width="30%"><input type='checkbox'> " + column + '</td><td><input type="text" id="aln' + column + '"></td></tr>';
    return iHtml
  }

Upvotes: 0

Views: 767

Answers (2)

Guerilla
Guerilla

Reputation: 80

You got confused with your string concatenation.

function addColumn(column){
    var iHtml;
    iHtml = '<tr><td  width="30%"><input type="checkbox"> ' + column + '</td><td><input type="text" id="aln' + column + '"></td></tr>';
    return iHtml;
}
$('#test').append(addColumn('t'));

This code will append your row to the table with the id test

As you tagged your question to jQuery, here is a quite formal approach:

function addColumn2(column){
    var chkBox = $('<input>')
                     .attr('type','checkbox');
    var txtInput = $('<input>')
                       .attr({
                           type:'text',
                           id:'aln'+column
                       });
    var col1 = $('<td>')
                   .css({width:'30%'})
                   .text(column)
                   .prepend(chkBox);
    var col2 = $('<td>')
                   .append(txtInput);
    var row = $('<tr>').append(col1).append(col2);
    return row;
}
$('#test').append(addColumn2('t'));

Example at jsFiddle

Upvotes: 0

Gaurav
Gaurav

Reputation: 28755

iHtml = '<tr><td  width="30%"><input type="checkbox"> ' + column + '</td><td><input type="text" id="aln' + column + '"></td></tr>';

just the problem of " and '

Update : 

iHtml = 'text"';      // whole text inside first `'` and next `'` will be treated as string. so correct way to use
iHtml = 'text's sample';   //  incorrect way to use, correct way is iHtml = 'text\'s sample'; or iHtml = 'text"s sample';

Upvotes: 1

Related Questions