CODEWITHSUNDEEP
javascriptjqueryhtml-table
Haley
Haley

Reputation: 53

.append() does not work with table

I want to add a table to my website with jquery´s append function when the user hovers over the image $("#dot0003"). Dreamweaver already tells me that there is a syntax error but I don't understand where.

$(document).ready(function() {

$("#dot0003").hover(
    function(){

        $("#tablespace").append('

        <table  id="table1" class="info0004" border="4">
        <tr>
        <td>roomnumber</td>
        <td>200</td>
        </tr>
        <tr>
        <td>number of bathrooms</td>
        <td>2</td>
        </tr>
        <tr>
        <td>number of beds</td>
        <td><img src="_index/_dots/dot.gif" width="20" height="20"></td>
        </tr>
        </table>')

})
})

Any help appreciated!

Upvotes: 0

Views: 129

Answers (2)

Mohammod Hossain
Mohammod Hossain

Reputation: 4114

Your adding dynamic table syntax has a space so remove space then run

You can try to run using simple dynamic div

$(document).ready(function() {

    $("#dot0003").hover(
        function(){
            $("#tablespace").append('<div>ss</div>')})})

But when you will write syntax with space it will show error

$(document).ready(function() {

$("#dot0003").hover(
    function(){
        $("#tablespace").append('<div>ss

')})})

Try with this code after removing extra space

$(document).ready(function() {

$("#dot0003").hover(
    function(){

        $("#tablespace").append('<table id="table1" class="info0004" border="4">       <tr><td>roomnumber</td><td>200</td></tr>        <tr><td>number of bathrooms</td>       <td>2</td></tr><tr><td>number of beds</td>        <td><img src="_index/_dots/dot.gif" width="20" height="20"></td></tr></table>')

})
})

Upvotes: 0

sgeddes
sgeddes

Reputation: 62861

Are you sure this is what you're trying to do? Meaning, when you hover over dot0003, it's going to keep trying to append this data. See the fiddle here.

With that said, your issue is with your spaces. See the fiddle above. Either remove your spaces or build your string like:

var myContent = '<table  id="table1" class="info0004" border="4">'
myContent += '<tr>'
...

But this produces invalid HTML markup as your adding tables in your table like such:

<table>
    <tr><td></td></tr>
    <table>
    ...

I think you should use jQuery's after method instead of append.

Good luck.

Upvotes: 1

Related Questions