Displaying table with class in Jquery

Question

I want to append some values from jQuery in my HTML table

$(document).ready(function() {
  console.log("ready!");

  // on form submission ...
  $('form').on('submit', function() {

    console.log("the form has beeen submitted");

    // grab values
    valueOne = $('input[name="perfid"]').val();
   
    console.log(valueOne)

    $.ajax({
      type: "POST",
      url: "/",
	  datatype:'json',
      data : { 'first': valueOne},
      success: function(result) {
		console.log(result.result[0].userid);
       
		
		$('#result').html("<table class="table table-bordered responsive"><tr><td>" + result.result[0].hosts[0].filer + "</td><td>" + result.result[0].hosts[0].hostname + "</td><td>" + result.result[0].hosts[0].model + "</td></tr></table>");
		
       
      },
      error: function(error) {
        console.log(error)
      }
    });

  });

});

I am getting error as : SyntaxError: missing ) after argument list for the line :

$('#result').html("<table class="table table-bordered responsive"><tr><td>" + result.result[0].hosts[0].filer + "</td><td>" + result.result[0].hosts[0].hostname + "</td><td>" + result.result[0].hosts[0].model + "</td></tr></table>");

Can someone point out what is going wrong? TIA

Use quotes appropriately when nesting inside each other. $('#result').html('<table class="table table-bordered responsive"><tr><td>" + result.result[0].hosts[0].filer + "</td><td>" + result.result[0].hosts[0].hostname + "</td><td>" + result.result[0].hosts[0].model + "</td></tr></table>'); — Tushar
– Tushar, Commented Dec 16, 2015 at 6:16

Community · Accepted Answer · 2017-05-23 11:44:38Z

1

its all about quotes

$('#result').html('<table class="table table-bordered responsive"><tr><td>' + result.result[0].hosts[0].filer + '</td><td>' + result.result[0].hosts[0].hostname + '</td><td>' + result.result[0].hosts[0].model + '</td></tr></table>');

take a look at How to concatenate variable in string in javascript

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Dec 16, 2015 at 6:17

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

3 Comments

Akki Over a year ago

I have tried this but I cannot get anything displayed with it. The div tag with result class stays blank.

Mohamed-Yousef Over a year ago

@Akki by using $('#result') that mean you have element with result id not class if its class you should use $('.result')

Mohamed-Yousef Over a year ago

@Akki glad it helped .. Good Luck :)

Deepak Joshi · Accepted Answer · 2015-12-16 06:24:09Z

0

Please try below code

var table = $('<table/>').addClass('table table-bordered responsive');
var rows='<tr><td>' + result.result[0].hosts[0].filer + '</td><td>' + result.result[0].hosts[0].hostname + '</td><td>' + result.result[0].hosts[0].model + '</td></tr>'; 
$(table).append(rows);
$('#result').append(table);

answered Dec 16, 2015 at 6:24

Deepak Joshi

1,0668 silver badges18 bronze badges

Collectives™ on Stack Overflow

Displaying table with class in Jquery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related