Adding a Button dynamically in a Table using HTML and Java script

Question

enter image description here Hi I have Table, I have to add a Button, beside the +, when ever I click on it.

The code is not working. I do not understand why.

function addProject() {
        var r = $('<input/>').attr({
            type: "button",
            id: "field",
            value: 'Project'
        });
       $("#idProject").parent().append(r);
    }

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
</thead>
<tbody>
    
    <tr>

        <td style="text-align:center; width:8%"></td>
          <td style="text-align:center; width:8%"><input id="idProject" type="button" style="border:1px solid grey;text-align:center;background-color:#E0EEEE" value="+" onclick=addProject() /></td>
    </tr>
    
</tbody>
 </table>
  </html>

You didn't inlcude jQuery and in javascript snipet you can't use <script tag. — jcubic
– jcubic, Commented Feb 8, 2016 at 9:52
I have two tables in my original code, and the buttons are appended in both the tables. And they are not appended beside the +, but at the end of the table. — SpanB
– SpanB, Commented Feb 8, 2016 at 9:56

Arun Sharma · Accepted Answer · 2016-02-08 09:57:46Z

1

use the following code view demo

   <!DOCTYPE html>
    <html>
    <body>

    <p>Click the button to make a BUTTON element with text.</p>

    <button onclick="createbtn()">Create</button>

    <script>
    function createbtn() {
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode("CLICK ME");
        btn.appendChild(t);
        document.body.appendChild(btn);
    }
    </script>

    </body>
    </html>

http://codepen.io/anon/pen/vLQEEX

answered Feb 8, 2016 at 9:57

Arun Sharma

1,3298 silver badges11 bronze badges

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

Comments

Cyril Cherian · Accepted Answer · 2016-02-08 10:36:32Z

Since you saying that you want to display the button beside the + ...add it to the same td.

1) add to the input's td like this $(event.srcElement).parent().append(r);

function test() {
        var r = $('<input/>').attr({
            type: "button",
            id: "field",
            value: 'Project'
        });
    
    $(event.srcElement).parent().append(r);
    }

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
</thead>
<tbody>
    
    <tr>

        <td style="text-align:center; width:8%"></td>
        <td style="text-align:center; width:8%"><input id="idProject" type="button" style="border:1px solid grey;text-align:center;background-color:#E0EEEE" value="+" onclick=test() /></td>
    </tr>
    
</tbody>
 </table>
  </html>

Collectives™ on Stack Overflow

Adding a Button dynamically in a Table using HTML and Java script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related