How do I create a table inside the script tag without going to another page? I am currently using the document.write() function but it opens a new page but i want it to stay on the page as i click my button? here is my current code:

 $( "#searchVehicleDesc" ).button().click(function( event ) {

                document.write('<fieldset>');
                document.write('<legend>Dashboard<\/legend><br>');
                document.write('<table border="1" width="650">');
                document.write('<tr bgcolor=#c0c0c0>');
                document.write('<td width=100 align="center"><font face="helvetica"><b>Vehicle Name<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Service Type<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Others<\/b></\font><\/td>');
                document.write('<td width=100 align="center"><font face="helvetica"><b>Reference No.<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Date<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Type<\/b><\/font><\/td>');
                document.write('<\/tr>');
                document.write('<\/table>');
                document.write('<\/fieldset>');


  });

How do I create a table inside the script tag without going to another page? I am currently using the document.write() function but it opens a new page but i want it to stay on the page as i click my button? here is my current code:

 $( "#searchVehicleDesc" ).button().click(function( event ) {

                document.write('<fieldset>');
                document.write('<legend>Dashboard<\/legend><br>');
                document.write('<table border="1" width="650">');
                document.write('<tr bgcolor=#c0c0c0>');
                document.write('<td width=100 align="center"><font face="helvetica"><b>Vehicle Name<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Service Type<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Others<\/b></\font><\/td>');
                document.write('<td width=100 align="center"><font face="helvetica"><b>Reference No.<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Date<\/b><\/font><\/td>');
                document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Type<\/b><\/font><\/td>');
                document.write('<\/tr>');
                document.write('<\/table>');
                document.write('<\/fieldset>');


  });

• javascript
• jquery
• html
• ajax

Share Improve this question Follow asked May 7, 2014 at 7:01 fanboime12fanboime12 2122 silver badges1010 bronze badges 1

• possible duplicate of Javascript document write overwriting page? – CodingIntrigue Commented May 7, 2014 at 7:12

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 4

Do something like this:

var myTable =
    '<fieldset>' +
        '<legend>Dashboard</legend></br>' +
        '<table border="1" width="650">' +
            '<tr bgcolor=#c0c0c0>' +
                '<td width=100 align="center"><font face="helvetica"><b>Vehicle Name</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Others</b></font></td>' +
                '<td width=100 align="center"><font face="helvetica"><b>Reference No.</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Reference Date</b></font></td>' +
                '<td width=80 align="center"><font face="helvetica"><b>Reference Type</b></font></td>' +
            '</tr>' +
        '</table>' +
    '</fieldset>';

$( "#searchVehicleDesc" ).button().click(function( event ) {
    $(document.body).append(myTable);
});

Notice that you don't have to escape forward slashes (/) in JavaScript strings.

You can also make the table HTML a lot shorter, while also making it easier to maintain, by using CSS:

In your JavaScript:

var myTable =
    '<fieldset>' +
        '<legend>Dashboard</legend></br>' +
        '<table>' +
            '<tr>' +
                '<td class="large">Vehicle Name</td>' +
                '<td class="small">Service Type</td>' +
                '<td class="small">Others</td>' +
                '<td class="large">Reference No.</td>' +
                '<td class="small">Reference Date</td>' +
                '<td class="small">Reference Type</td>' +
            '</tr>' +
        '</table>' +
    '</fieldset>'

CSS file:

table{
    border: 1px solid black;
}
table tr{ /* You could use just `tr{` here (leave out `table `), I just prefer this */
    background-color: #c0c0c0;
}
table tr td{ /* Same here, for `td{` */
    font-family:helvetica;
    font-weight:bold;
    text-align: center;
}
.large{
    width: 100px;
}
.small{
    width: 80px;
}

document.write() will overwrite current content in your page. You can use .append() instead:

$("#searchVehicleDesc" ).button().click(function( event ) {
     $(document.body).append('<fieldset><legend>Dashboard</legend><br /><table border="1" width="650"><tr bgcolor="#c0c0c0"><td width="100" align="center"><font face="helvetica"><b>Vehicle Name</b></font></td><td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td><td width="80" align="center"><font face="helvetica"><b>Others</b></font></td><td width="100" align="center"><font face="helvetica"><b>Reference No.</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Date</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Type</b></font></td></tr></table></fieldset>');
});

You should create DOM elements in JS using the document.createElement() method. Read this: https://developer.mozilla/en-US/docs/Web/API/document.createElement

You could also append the html string like document.getElementById('target_container').innerHTML('<div><-- your über long html string--></div>');

In case of jQuery you can simply append your html string to an object, like $('#target_container').html('<div><-- your über long html string--></div>');

use jQuery's append() function.

$( "#searchVehicleDesc" ).button().click(function( event ) {

                $('#searchVehicleDesc').append('<fieldset>');    
  });

see jsFiddle: http://jsfiddle/L2DEE/

That is because each time you call document.write, you are overriding the document.

Concat all the strings and then append it to some container.

You appear to be using jQuery, there are lots of methods you can use to add content to an existing page:

• html
• append
• appendTo
• prepend
• prependTo
• before
• insertBefore
• after
• insertAfter

...and others. They're all covered, with examples, in the jQuery API documentation.

Just make a div and put your table in it.

<div id="container"></div>

your script should be something like this:

var table = '<fieldset>'+
        '<legend>Dashboard</legend><br>'+
        '<table border="1" width="650">';

... and so on... Then simply append to your container.

 $("#container").append(table);

You can do following

var myObj, txt;
txt += "<table>"
                myObj = JSON.parse(text);
                        for (x in myObj.issues) {
                            console.log(myObj.issues[x])
                            txt += "<tr><td>" + myObj.issues[x].key + "</td>";
                            txt += "<td>" + myObj.issues[x].fields.summary + "</td></tr>";
                        }
                        txt += "</table>"
                        document.getElementById("demo").innerHTML = txt;