Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add tr (row) with dynamic td (column) to table?
    primarykey
    data
    text
    <p>I have a question about dynamic <code>tr</code> with keep the content of <code>td</code>.</p> <p>I have a table like flowing code:</p> <pre><code>&lt;table id="map2"&gt; &lt;tr&gt; &lt;td class="15c"&gt;15&lt;/td&gt; &lt;td class="16c"&gt;16&lt;/td&gt; &lt;td class="17c"&gt;17&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="15c"&gt;15&lt;/td&gt; &lt;td class="16c"&gt;16&lt;/td&gt; &lt;td class="17c"&gt;17&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>I added some jQuery code that create a column dynamically. Like flowing code:</p> <pre><code>$('#map2').on('mouseenter', 'td:last-child', function(){ var tdClass = $(this).attr('class'); var newClass = parseInt(tdClass); if(newClass &lt;= 30) { $(this).after('&lt;td class="'+ (newClass+1) +'c"&gt;'+ (newClass+1) +'&lt;/td&gt;&lt;td class="'+ (newClass+2) +'c"&gt;'+ (newClass+2) +'&lt;/td&gt;&lt;td class="'+ (newClass+3) +'c"&gt;'+ (newClass+3) +'&lt;/td&gt;'); } else { alert('end!') } }); $('#map2').on('mouseenter', 'td:first-child', function(){ var tdClass = $(this).attr('class'); var newClass = parseInt(tdClass); if(newClass &gt;= 3) { $(this).before('&lt;td class="'+ (newClass-3) +'c"&gt;'+ (newClass-3) +'&lt;/td&gt;&lt;td class="'+ (newClass-2) +'c"&gt;'+ (newClass-2) +'&lt;/td&gt;&lt;td class="'+ (newClass-1) +'c"&gt;'+ (newClass-1) +'&lt;/td&gt;'); } else { alert('end!') } }); </code></pre> <p>That code create a <code>td</code> for me, now I want to create a <code>tr</code> (row) with keep the content. For example when the new row was created, that had content like before <code>td</code> in before <code>tr</code>. I tried some code like this:</p> <pre><code>$('#map2').on('mouseenter', 'tr:first-child', function(){ var trCont = $(this).html; // $(this).before('&lt;tr&gt;'+ trCont +'&lt;/tr&gt;'); $(this).before('&lt;tr&gt;&lt;td&gt;new row&lt;/td&gt;&lt;/tr&gt;'); }); </code></pre> <p>but didn't work. How can I solve this problem?</p> <p><a href="http://jsfiddle.net/H6MSS/2/" rel="nofollow noreferrer">http://jsfiddle.net/H6MSS/2/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload