unlvt unlvt - 2 months ago 6
jQuery Question

Appending td to table

I'm having an issue appending another row to my existing table.

$('.vv div:first-child').on('click', function(){
$("tbody").append("<tr><td><input type="checkbox" class="selectall" /></td><td><span class="hdv dsp">Product</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 1</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 2</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 3</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 4</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp">Quantity</span><span class="hdv" contenteditable="true">1</span></td><td><span class="hdv dsp">Price</span><span class="hdv" contenteditable="true">$00.00</span></td></tr>");


I'm not sure what I'm missing or doing wrong. I tried the code above to no avail.

This is the table I am trying to attach it to: https://jsfiddle.net/nwqmvo36/14/

Answer

https://jsfiddle.net/nwqmvo36/15/

First, this is a problem

.append("<tr><td><input type="checkbox"

The issue is that your quotes are now no longer lining up correctly. It is best in these situations to use the alternative ', like so:

.append('<tr><td><input type="checkbox" ... all that other html ... ');

In addition, you forget to reference $ (jQuery) in your jsFiddle. Please always check your console for errors as these should have been rather straightforward to address.

Comments