0

I have an external file that creates a table using jQuery. I am trying to set the first column to be a different width to the other columns. I would prefer to add something to it that I can use in css to make future edits easier. I am struggling to get the syntax correct. A couple of my attempts are shown in code comments but I have tried others and failed with them too.

var $table = $('<table>');
$table.append()
// thead
.append('<thead>').children('thead')
.append('<tr />').children('tr').append('<th></th><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>');

//tbody
var $tbody = $table.append('<tbody />').children('tbody');

// add row
$tbody.append('<tr />').children('tr:last')
//.append("<th class="dynamicTable-rowHead">name</td>") -console gives Uncaught SyntaxError: missing ) after argument list
//.append("<th>name</th>").setAttribute('width', '10%')  //setAttribute is not a function
.append("<th>name</td>")  //this works but cannot define a width in css without it affecting all table columns
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>");

// add table to dom
$table.appendTo('#dynamicTable');
Improve this question
4
  • You have some incorrect closing tags inside some of the <th> appends Commented Aug 16, 2019 at 10:31
  • 1
    Use external CSS, not inline: table tbody th { width: 10%; } Commented Aug 16, 2019 at 10:32
  • Also note that your pattern of using append() then children() to select the element you just created can be negated by just using appendTo(). Eg. var $tbody = $('<tbody />').appendTo($table); Commented Aug 16, 2019 at 10:33
  • Thank you everyone I know have much to learn, but Sumit Patel has given me a fantastic solution Commented Aug 16, 2019 at 10:43

2 Answers 2

Reset to default
1

You can do it using css only.

var $table = $('<table>');
$table.append()
// thead
.append('<thead>').children('thead')
.append('<tr />').children('tr').append('<th></th><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>');

//tbody
var $tbody = $table.append('<tbody />').children('tbody');

// add row
$tbody.append('<tr />').children('tr:last')
//.append("<th class="dynamicTable-rowHead">name</td>") -console gives Uncaught SyntaxError: missing ) after argument list
//.append("<th>name</th>").setAttribute('width', '10%')  //setAttribute is not a function
.append("<th>name</td>")  //this works but cannot define a width in css without it affecting all table columns
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>")
.append("<td>val</td>");

// add table to dom
$table.appendTo('#dynamicTable');
#dynamicTable th:first-child{
  width:200px;
}

#dynamicTable th{
  width:100px;
  text-align:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dynamicTable"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I am glad that helped.
0

jQuery has a attr() method for that.

https://api.jquery.com/attr/

You can also use the :first-child CSS' selector.

https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:first-child

Finally, this 

"<th class="dynamicTable-rowHead">name</td>"
          ^^^                  ^^^

cannot work since you are breaking the string. You could solve it by:

'<th class="dynamicTable-rowHead">name</td>'

or

"<th class=\"dynamicTable-rowHead\">name</td>"

or 

"<th class='dynamicTable-rowHead'>name</td>"
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.