Adding a button to a table using Javascript

Question

function OnSuccess(xml) {

  document.getElementById("people").innerHTML = "<tr><td>Employee ID</td><td>First Name</td><td >Last Name</td></tr>";

  $(xml).find('Table').each(function () {
    var id = $(this).find('EmployeeID').text();
    var fn = $(this).find('FirstName').text();
    var ln = $(this).find('LastName').text();

    //Create  button
    var btn = document.createElement("input");

    //Set the attributes
    btn.setAttribute("onclick", "ServiceCall3(id)");
    btn.setAttribute("type", "button");
    btn.setAttribute("value", "Info");
    btn.setAttribute("name", id);
    $('#people').append('<tr><td>' + id + '</td><td>' + fn + '</td><td>' + ln + '</td><td> '+ btn + '</td></tr>')
  }

)};

Hey, this is my function which is creating a table from xml file. What I need is to add a button with id same as read parameter from xml, a the end of each row. What I am getting instead of a button is [object HTMLInputElement]. Please help.

Great, fast response. Can you tell me now how can I pass id value to ServiceCall3 ? or use it in ServiceCall3 ?

function serviceCall3(id) {
            $.ajax({
                type: "POST",
                url: "../TestWebService.asmx/GetAll",
                data: "{'data' :" + id + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "xml",
                success: OnSuccess3,
                error: OnError
            });
             }

you tried what i mentioned in my answer? what you get if you console.log or alter(id) right before //Create button comment — Aamir Afridi
– Aamir Afridi, Commented May 16, 2014 at 14:53
Guys, can you tell me how can i pass id parameter to function ServiceCall3 ? — Matt K
– Matt K, Commented May 16, 2014 at 15:08
great, I have it all sorted now. i was calling ServiceCall3 instead of serviceCall3 Thanks All — Matt K
– Matt K, Commented May 16, 2014 at 15:29

MrCode · Accepted Answer · 2014-05-16 14:53:19Z

2

The issue is you are trying to concatenate a DOM element (btn) into a string (which causes the [object HTMLInputElement]). Instead you should append it:

$('#people').append(
    $('<tr></tr>').append(
        $('<td></td>').text(id),
        $('<td></td>').text(fn),
        $('<td></td>').text(ln),
        $('<td></td>').append(btn)
    )
);

This creates the row and four cells without concatenating content into raw HTML.

answered May 16, 2014 at 14:53

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

Comments

Aamir Afridi · Accepted Answer · 2014-05-16 14:58:44Z

1

id is text already so just put id instead of $(id).text()

btn.setAttribute("name", id);

edited May 16, 2014 at 14:58

answered May 16, 2014 at 14:51

Aamir Afridi

6,4313 gold badges44 silver badges42 bronze badges

Comments

K.S. · Accepted Answer · 2014-05-16 14:54:11Z

0

It is because you write the button-element as a string:

<td> '+ btn + '</td>

answered May 16, 2014 at 14:54

K.S.

1531 gold badge1 silver badge10 bronze badges

Comments

mohamedrias · Accepted Answer · 2014-05-16 14:58:34Z

0

var id = $(this).find('EmployeeID').text();

You have specified id to be text.

But again, you are writing $(id).text()

 btn.setAttribute("name", $(id).text());

update the above line with

 btn.setAttribute("name", id);

Also you are trying to append btn to a string. Which is converting btn.toString to print the value.

Instead use append btn separately to fix the issue.

edited May 16, 2014 at 14:58

answered May 16, 2014 at 14:52

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Collectives™ on Stack Overflow

Adding a button to a table using Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related