How to append a value with button's ID in runtime?

I am using below javaScript code to create table in runtime. And i somewhat assumed to append a value into the ID of the button. Will it work. I am confused because of double quotes.

function createTable(){
EmployeeManagement.getList(funct开发者_如何转开发ion(data){
var employee = data;

var x = "<table border= 1 >";
    x+="<thead> " + "<tr>" + "<td>" + "Check" + "</td><td>" + "ID" + "</td><td>" + "Name" + "</td><td>" + "Age" + "</td><td>" + "Dept" + "</td><td>" + "Option" + "</td></tr></thead>";
    for(i = 0; i<data.length; i++)
    {
        var id = data[i].id;
    x+= "<tr>";
    x+= "<td>" + "<input type=checkbox name=Employee value='emp'+id />"
    x+= "<td>" + data[i].id + "</td><td>" + data[i].name + "</td>";
    x+= "<td>" + data[i].age + "</td><td>" + data[i].dept + "</td>";
    x+= "<td>" + "<input id='edit'+id type='button' value='Edit' onclick=edit(this.id) />" + "</td>"; 
    x+= "</tr>";
    }
    x+= "</table>";
    $('#tableHolder').html(x);
});
   }

here, i want to append the id value, to the ID value id BUTTON. I already coded for it. Will it work or how to make it work. I can use jquery means, how??? Any suggestions would be appreciative... Thanks

No it won't work. Just do it the same as with the other strings, use string concatenation:

"<input id='edit" + id + "' type='button' value='Edit' onclick=edit(this.id) />" 
//              --^  --^ 

Currently, you are generating invalid HTML. But you could have tried yourself to find this out ;)

Yes, this should work. Assuming the id is FOO, the html to generate is:

<input id='editFOO' type='button' ...

which can be done by splitting it up into three parts like so:

"<input id='edit" + id + "' type='button' ..."

Use string concatenation... Also your cells in subsequent rows should match the number of cells in your head row.

function createTable(){
EmployeeManagement.getList(function(data){
var employee = data;

var x = "<table border= 1 >";
    x+="<thead> " + "<tr>" + "<td>" + "Check" + "</td><td>" + "Name" + "</td><td>" + "Dept" + "</td><td>" + "Option" + "</td></tr></thead>";
    for(i = 0; i<data.length; i++)
    {
        var id = data[i].id;
    x+= "<tr>";
    x+= "<td>" + "<input type=checkbox name=Employee value='emp"+id+"' /> </td>";
    x+= "<td>" + data[i].id + "</td><td>" + data[i].name + "</td>";
    x+= "<td>" + data[i].age + "</td><td>" + data[i].dept + "</td>";
    x+= "<td>" + "<input id='edit"+id+"' type='button' value='Edit' onclick=edit(this.id) />" + "</td>"; 
    x+= "</tr>";
    }
    x+= "</table>";
    $('#tableHolder').html(x);
});
   }

In JavaScript vars inside a double quoted string are not interpreted. So you have to put the vars outside of the string. Replace e.g. this:

"<input type=checkbox name=Employee value='emp'+id />"

with this:

"<input type=checkbox name=Employee value='emp" + id "' />"