Javascript ajax syntax to create html row

Question

I need to create a row with ajax in a javascript function, but i'm having a lot of trouble finding the correct syntax.

This is the HTML final result i want to get:

<td style="text-align:center">
<input type="image" src="nienteico.png" style="cursor:pointer; width:40px; height:40px" id="5.51" class="ajaxEdit" onclick="cambiastato(5.51)">
</td>

And this is the JS code that needs to be modified:

<td style="+'text-align:center'+"><input type="+'image'+" src="+'nienteico.png'+" style="+'cursor:pointer; width:40px; height:40px'+" id="+'5.51'+" class="+'ajaxEdit'+" onclick="+'cambiastato(5.51)'+"></input></td>

Finally this is the HTML i obtain using js i have written before:

<td style="text-align:center"><input type="image" src="nienteico.png" style="cursor:pointer;" width:40px;="" height:40px="" id="5.51" class="ajaxEdit" onclick="cambiastato(5.51)"></td>

Thanks in advance!

Don't try to write HTML by mashing strings together with JS. Use DOM. createElement, setAttribute, appendChild, etc. It's much easier to manage. — Quentin
– Quentin, Commented Dec 7, 2014 at 12:48
Sorry, but I guess you should read at first this before asking questions about JavaScript, and then about AJAX itself Getting Started AJAX — Givi
– Givi, Commented Dec 7, 2014 at 12:49
@eluco look at cursor, width and height attribute! They are different from the first line i've written — Peppegiuseppe
– Peppegiuseppe, Commented Dec 7, 2014 at 12:50
there is no need to load jquery lib when you can do it with pure javascript — Super Hornet
– Super Hornet, Commented Dec 7, 2014 at 13:19

Amit Joki · Accepted Answer · 2014-12-07 13:17:44Z

2

Don't get into dirty string concatenations, instead go for a cleaner code.

var row = $('<td />', {    style: "text-align:center"}).append($('<input />', {
    type: 'image',
    src: 'nienteico.png',
    'class': 'ajaxEdit'
}).css({
    id: '5.51',
    cursor: 'pointer',
    width: '40px',
    height: '40px',
}).click(function() {    cambiastato(5.51);    }));

edited Dec 7, 2014 at 13:17

answered Dec 7, 2014 at 12:49

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

4 Comments

Peppegiuseppe Over a year ago

Thanks! How can i use your code if i need the "after" function? For example: $("#"+response.last_id+"").closest("tr").after(row); Where "row" is the row we have now created

Amit Joki Over a year ago

@Peppegiuseppe now you can just add .after(row)

Peppegiuseppe Over a year ago

Yes! Great answer, now.. i want to create a <tr> which has inside 4 <td> (made in the same way i show you before), how can i use your solution? Thanks

Amit Joki Over a year ago

@Peppegiuseppe just search "creating elements using jQuery" and you can get official docs

Super Hornet · Accepted Answer · 2014-12-07 12:56:06Z

2

try this in pure javascript:

var td = document.createElement('td');
    td.style.textAlign="center";
var input = document.createElement('input');
    input.type="image";
    input.src="nienteico.png";
    input.style.cursor="pointer";
    input.style.width="40px";
    input.style.height="40px";
    input.setAttribute("id","5.51");
    input.className="ajaxEdit";
    input.onClick = function() { cambiastato(5.51); };

td.appendChild(input);

answered Dec 7, 2014 at 12:56

Super Hornet

2,9275 gold badges31 silver badges58 bronze badges

2 Comments

Peppegiuseppe Over a year ago

And what about inserting more than one td? For example this structure: <tr><td></td><td></td></tr>

Super Hornet Over a year ago

you can try for loop and inside use my codes with different values

elcuco · Accepted Answer · 2014-12-07 12:59:35Z

1

Another solution (which is ugly, and not recommended):

var html_template = 
'<td style="%style%">' +
   '<input type="%img_type%" src="%img_src%" style="%img_style%" id="%img_id%" class="ajaxEdit" onclick="cambiastato(5.51)">' +
'</td>';

html_template = html_template.replace("%style%", "text-align:center");
html_template = html_template.replace("%img_type%", "image");
html_template = html_template.replace("%img_src%", "neinteico.png");
html_template = html_template.replace("%img_id%", "5.51");
html_template = html_template.replace("%img_style%", "cursor:pointer; width:40px; height:40px");

alert(html_template)

answered Dec 7, 2014 at 12:59

elcuco

9,2469 gold badges50 silver badges74 bronze badges

Collectives™ on Stack Overflow

Javascript ajax syntax to create html row

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related