JQuery, add table row without declaring the tags in Javascript

Question

I wanted to prepare a table row as a template in a HTML doc in order for not typing it in JS as what I've done mostly. I just saved the DOM element as JQuery object and cloned but doing it in a element seems it doesn't saved as an object.

I'm avoiding declaring in JS:

var _row = '<tr><td></td></tr>';

Since I wanted to make the element as dynamic by JS rather than declaring it as a string so I'm trying to create a HTML template for a table row.

In HTML:

<tr id='sampleRow'></tr>

In JS:

var _row = $('#sampleRow');

When consoling log the _row will give a result of init rather than an object.

How can I possibly accomplish like this?

In HTML:

<div class='sampleDiv'></div>

In JS:

var _container = $('.sampleDiv').clone();

In which it is an object.

You're getting init object because there may not be any DOM element associated with that selector. — Nishanth Matha
– Nishanth Matha, Commented Aug 5, 2016 at 0:55
@NishanthMatha I just solved it though. My mistake first is declaring a <tr> element in which can't be hidden and tried to contain it inside a <div> but still I don't get my desired output but It should be inside of another <table> rather. — BLNK
– BLNK, Commented Aug 5, 2016 at 1:01

BLNK · Accepted Answer · 2016-08-05 00:58:38Z

1

I just found my solution,

Instead of using as the container for table row template in which when you call it via JQuery and clone it and append to a table nothing happens, I used a table as the container.

In HTML:

<table class="destTable">
</table>

<table class="tableRowTmp" hidden>
    <tr><td colspan="6">Sample</td></tr>
</table>

In JS:

var oBannerTable = $('.destTable');
var oRow = $('.tableRowTmp').find('tr').clone();

oBannerTable.append(oRow.show());

answered Aug 5, 2016 at 0:58

BLNK

1541 silver badge14 bronze badges

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

2 Comments

zer00ne Over a year ago

If you have difficulty appending <tr> to a <table>, try appending to <tbody>. Even if a <table> is in markup, without a <tbody>, browsers by default will append a <tbody> to <table> by default.

BLNK Over a year ago

Actually I used <tbody>, I just mentioned <table> because it is the one that is common but thanks for mentioning it for other users. :)

Alex Thomsen · Accepted Answer · 2016-08-05 01:05:41Z

I personally prefer declaring simple objects like that in javascript through jQuery like this

$("<tr />", {  text: 'Table Row txt',
               class: 'some class',
               id: 'elementid'
             }).appendTo("tbody");

If you want to add elements to that tr you can chain it and use append as well which looks like

$("<tr />", {  text: 'Table Row txt',
               class: 'some class',
               id: 'elementid'
             }).append($('<div />', {
               text: 'Some text inside the div',
               class: 'anotherclass'
             })).appendTo("tbody");

Which would make

<tr class='some class' id='elementid'>Table Row txt
  <div class='anotherclass'>Some Text inside the div</div> 
<tr/>

If you want to use html as a template I would instead suggest using a method like John Resig suggests

http://ejohn.org/blog/javascript-micro-templating/

So you can do

<script type='companyname/mytemplate' id='trTemplate'>
 <tr id='sampleRow'></tr>
</script>

var template = $($("#trTemplate").innerHtml());

Collectives™ on Stack Overflow

JQuery, add table row without declaring the tags in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related