Insert New HTML Input Tag in td with Javascript?

Question

I want to insert new HTML Input Tag in td for Text.My Leader said me not to use jquery and other plugins so, I think that can be only Javascript.I want to insert new Input tag for all td in table. How can I insert New HTML Input Tag??? Pls Help Me !

<script type="text/javascript">
var btn_name=document.getElementsByName("submitConfirm");
function init()
{
    document.getElementsByName("submitConfirm").onClick=function()
    {
    Edit_td();
    }
}
function Edit_td()
{

}

window.onload(init());

That's my prepared code.

show your markup also? and I didn't get what do you mean by only element name please specify. — Mritunjay
– Mritunjay, Commented Jul 16, 2014 at 2:34
"submitConfirm" is name of Input.I can handle that but I don't know how to insert Input tag within td when click the button — Ivory
– Ivory, Commented Jul 16, 2014 at 2:47

Mritunjay · Accepted Answer · 2014-07-16 03:47:34Z

1

I tried this, should work for you :-

function editTd() {
    var rows = document.getElementById('tbl1').rows;
    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        for (var j = 0; j < row.cells.length; j++) {
            var input = document.createElement('input');
            input.type = "text";
            row.cells[j].appendChild(input);
        };
    };
}

window.onload = function(){
    document.getElementsByName("submitConfirm")[0].onclick = editTd;
};

This is my markup

<button name="submitConfirm">submit</button>
<table id="tbl1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

edited Jul 16, 2014 at 3:47

answered Jul 16, 2014 at 3:01

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

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

Comments

rawiro · Accepted Answer · 2014-07-16 02:47:05Z

1

var td = document.querySelector('td') // or getElementById/ClassName[0]  

var input = document.createElement('input')
input.type = 'text' // or other

td.appendchild(input)

answered Jul 16, 2014 at 2:47

rawiro

2261 silver badge4 bronze badges

5 Comments

Ivory Over a year ago

In my Web page,that has other td from other table so that will be affect all, isn't it?how can I take td from my target table.I can only use table ID...

rawiro Over a year ago

put here your html, without that i cant help you

rawiro Over a year ago

you can do var table = document.getElementById('table-id') var td = table.querySelector('td')

Ivory Over a year ago

I can't touch html too.He give me table id other tag name.I can run to see output.I can see only tags from Mozilla Inspector . That's all. I'm sorry

Ivory Over a year ago

That will be great :D

Collectives™ on Stack Overflow

Insert New HTML Input Tag in td with Javascript?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related