How to edit the HTML inside a table using JavaScript

When I try to add a button on a html table the table won't appear. On the last element of "ligne" td class=ach.

function afficherCatalogue(livres){ 

    var ligne;

    for(var i in livres) {  

        ligne = '<tr>';

        ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

        ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

        ligne += '<td class=prx>' + livres[i].prix + '</td>';  

        ligne += '<td class=ach>' + <button type="button"></button> + '</td>';

        ligne += '</tr>';



        document.getElementById('tbc').innerHTML += ligne;

    }

<tbody id=tbc><!-- table to fill --></tbody>

I have to add a simple button.

edited Jan 1 at 22:46

AndrewL64

10.2k41947

asked Jan 1 at 19:52

fryx

124

2

What is the livres parameter supposed to be? Number, array, string? And if it is one of those, for(var i in livres) is not how you write a for loop.

– AndrewL64
Jan 1 at 19:58

add a comment |

When I try to add a button on a html table the table won't appear. On the last element of "ligne" td class=ach.

function afficherCatalogue(livres){ 

    var ligne;

    for(var i in livres) {  

        ligne = '<tr>';

        ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

        ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

        ligne += '<td class=prx>' + livres[i].prix + '</td>';  

        ligne += '<td class=ach>' + <button type="button"></button> + '</td>';

        ligne += '</tr>';



        document.getElementById('tbc').innerHTML += ligne;

    }

<tbody id=tbc><!-- table to fill --></tbody>

I have to add a simple button.

edited Jan 1 at 22:46

AndrewL64

10.2k41947

asked Jan 1 at 19:52

fryx

124

2

What is the livres parameter supposed to be? Number, array, string? And if it is one of those, for(var i in livres) is not how you write a for loop.

– AndrewL64
Jan 1 at 19:58

add a comment |

When I try to add a button on a html table the table won't appear. On the last element of "ligne" td class=ach.

function afficherCatalogue(livres){ 

    var ligne;

    for(var i in livres) {  

        ligne = '<tr>';

        ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

        ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

        ligne += '<td class=prx>' + livres[i].prix + '</td>';  

        ligne += '<td class=ach>' + <button type="button"></button> + '</td>';

        ligne += '</tr>';



        document.getElementById('tbc').innerHTML += ligne;

    }

<tbody id=tbc><!-- table to fill --></tbody>

I have to add a simple button.

edited Jan 1 at 22:46

AndrewL64

10.2k41947

asked Jan 1 at 19:52

fryx

124

When I try to add a button on a html table the table won't appear. On the last element of "ligne" td class=ach.

function afficherCatalogue(livres){ 

    var ligne;

    for(var i in livres) {  

        ligne = '<tr>';

        ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

        ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

        ligne += '<td class=prx>' + livres[i].prix + '</td>';  

        ligne += '<td class=ach>' + <button type="button"></button> + '</td>';

        ligne += '</tr>';



        document.getElementById('tbc').innerHTML += ligne;

    }

<tbody id=tbc><!-- table to fill --></tbody>

I have to add a simple button.

function afficherCatalogue(livres){ 

    var ligne;

    for(var i in livres) {  

        ligne = '<tr>';

        ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

        ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

        ligne += '<td class=prx>' + livres[i].prix + '</td>';  

        ligne += '<td class=ach>' + <button type="button"></button> + '</td>';

        ligne += '</tr>';



        document.getElementById('tbc').innerHTML += ligne;

    }

<tbody id=tbc><!-- table to fill --></tbody>

function afficherCatalogue(livres){ 

    var ligne;

    for(var i in livres) {  

        ligne = '<tr>';

        ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

        ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

        ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

        ligne += '<td class=prx>' + livres[i].prix + '</td>';  

        ligne += '<td class=ach>' + <button type="button"></button> + '</td>';

        ligne += '</tr>';



        document.getElementById('tbc').innerHTML += ligne;

    }

<tbody id=tbc><!-- table to fill --></tbody>

javascript html button

edited Jan 1 at 22:46

AndrewL64

10.2k41947

asked Jan 1 at 19:52

fryx

124

edited Jan 1 at 22:46

AndrewL64

10.2k41947

asked Jan 1 at 19:52

fryx

124

edited Jan 1 at 22:46

AndrewL64

10.2k41947

edited Jan 1 at 22:46

AndrewL64

10.2k41947

edited Jan 1 at 22:46

AndrewL64

10.2k41947

asked Jan 1 at 19:52

fryx

124

asked Jan 1 at 19:52

fryx

124

asked Jan 1 at 19:52

fryx

124

2

What is the livres parameter supposed to be? Number, array, string? And if it is one of those, for(var i in livres) is not how you write a for loop.

– AndrewL64
Jan 1 at 19:58

add a comment |

2

What is the livres parameter supposed to be? Number, array, string? And if it is one of those, for(var i in livres) is not how you write a for loop.

– AndrewL64
Jan 1 at 19:58

What is the livres parameter supposed to be? Number, array, string? And if it is one of those, for(var i in livres) is not how you write a for loop.

– AndrewL64
Jan 1 at 19:58

add a comment |

1 Answer
1

active

oldest

votes

Assuming livres references an array of objects, you need to remove tbody from your table and create the tbody element with JavaScript using the createElement() method.

After creating the element, you can use a for loop to retrieved the required data from each object in the array and assign it to the ligne variable.

After looping through the objects, you can then populate the tbody element you just created with the retrieved data from the ligne variable using innerHTML() property and then append the tbody element to your table using the appendChild() method like this:

/* JavaScript */

var table = document.getElementById("table");



function afficherCatalogue(livres){

  var ligne = "";  

  var tbody = document.createElement('tbody');

  

  tbody.setAttribute("id", "tbc");

  

  for(i = 0; i < livres.length; i++) {  

    ligne = '<tr>';

    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

    ligne += '<td class=prx>' + livres[i].prix + '</td>';

    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';

    ligne += '</tr>';



    tbody.innerHTML += ligne;



    table.appendChild(tbody);

  }

}



var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]



afficherCatalogue(data);

/* CSS */

table {

  text-align: center;

}

thead td {

  font-weight: 700;

}

td {

  padding: 10px 10px;

}

<!-- HTML -->

<table id="table">

  <thead>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

  </thead>

</table>

edited Jan 1 at 22:22

answered Jan 1 at 20:48

AndrewL64

10.2k41947

Thank you ! that worked great. indeed creating tbody with js is better

– fryx
Jan 1 at 22:20

@fryx Glad I could help mate. Cheers!!

– AndrewL64
Jan 1 at 22:22

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998483%2fhow-to-edit-the-html-inside-a-table-using-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Assuming livres references an array of objects, you need to remove tbody from your table and create the tbody element with JavaScript using the createElement() method.

After creating the element, you can use a for loop to retrieved the required data from each object in the array and assign it to the ligne variable.

/* JavaScript */

var table = document.getElementById("table");



function afficherCatalogue(livres){

  var ligne = "";  

  var tbody = document.createElement('tbody');

  

  tbody.setAttribute("id", "tbc");

  

  for(i = 0; i < livres.length; i++) {  

    ligne = '<tr>';

    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

    ligne += '<td class=prx>' + livres[i].prix + '</td>';

    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';

    ligne += '</tr>';



    tbody.innerHTML += ligne;



    table.appendChild(tbody);

  }

}



var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]



afficherCatalogue(data);

/* CSS */

table {

  text-align: center;

}

thead td {

  font-weight: 700;

}

td {

  padding: 10px 10px;

}

<!-- HTML -->

<table id="table">

  <thead>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

  </thead>

</table>

edited Jan 1 at 22:22

answered Jan 1 at 20:48

AndrewL64

10.2k41947

Thank you ! that worked great. indeed creating tbody with js is better

– fryx
Jan 1 at 22:20

@fryx Glad I could help mate. Cheers!!

– AndrewL64
Jan 1 at 22:22

add a comment |

Assuming livres references an array of objects, you need to remove tbody from your table and create the tbody element with JavaScript using the createElement() method.

After creating the element, you can use a for loop to retrieved the required data from each object in the array and assign it to the ligne variable.

/* JavaScript */

var table = document.getElementById("table");



function afficherCatalogue(livres){

  var ligne = "";  

  var tbody = document.createElement('tbody');

  

  tbody.setAttribute("id", "tbc");

  

  for(i = 0; i < livres.length; i++) {  

    ligne = '<tr>';

    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

    ligne += '<td class=prx>' + livres[i].prix + '</td>';

    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';

    ligne += '</tr>';



    tbody.innerHTML += ligne;



    table.appendChild(tbody);

  }

}



var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]



afficherCatalogue(data);

/* CSS */

table {

  text-align: center;

}

thead td {

  font-weight: 700;

}

td {

  padding: 10px 10px;

}

<!-- HTML -->

<table id="table">

  <thead>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

  </thead>

</table>

edited Jan 1 at 22:22

answered Jan 1 at 20:48

AndrewL64

10.2k41947

Thank you ! that worked great. indeed creating tbody with js is better

– fryx
Jan 1 at 22:20

@fryx Glad I could help mate. Cheers!!

– AndrewL64
Jan 1 at 22:22

add a comment |

Assuming livres references an array of objects, you need to remove tbody from your table and create the tbody element with JavaScript using the createElement() method.

After creating the element, you can use a for loop to retrieved the required data from each object in the array and assign it to the ligne variable.

/* JavaScript */

var table = document.getElementById("table");



function afficherCatalogue(livres){

  var ligne = "";  

  var tbody = document.createElement('tbody');

  

  tbody.setAttribute("id", "tbc");

  

  for(i = 0; i < livres.length; i++) {  

    ligne = '<tr>';

    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

    ligne += '<td class=prx>' + livres[i].prix + '</td>';

    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';

    ligne += '</tr>';



    tbody.innerHTML += ligne;



    table.appendChild(tbody);

  }

}



var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]



afficherCatalogue(data);

/* CSS */

table {

  text-align: center;

}

thead td {

  font-weight: 700;

}

td {

  padding: 10px 10px;

}

<!-- HTML -->

<table id="table">

  <thead>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

  </thead>

</table>

edited Jan 1 at 22:22

answered Jan 1 at 20:48

AndrewL64

10.2k41947

Assuming livres references an array of objects, you need to remove tbody from your table and create the tbody element with JavaScript using the createElement() method.

After creating the element, you can use a for loop to retrieved the required data from each object in the array and assign it to the ligne variable.

/* JavaScript */

var table = document.getElementById("table");



function afficherCatalogue(livres){

  var ligne = "";  

  var tbody = document.createElement('tbody');

  

  tbody.setAttribute("id", "tbc");

  

  for(i = 0; i < livres.length; i++) {  

    ligne = '<tr>';

    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

    ligne += '<td class=prx>' + livres[i].prix + '</td>';

    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';

    ligne += '</tr>';



    tbody.innerHTML += ligne;



    table.appendChild(tbody);

  }

}



var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]



afficherCatalogue(data);

/* CSS */

table {

  text-align: center;

}

thead td {

  font-weight: 700;

}

td {

  padding: 10px 10px;

}

<!-- HTML -->

<table id="table">

  <thead>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

  </thead>

</table>

/* JavaScript */

var table = document.getElementById("table");



function afficherCatalogue(livres){

  var ligne = "";  

  var tbody = document.createElement('tbody');

  

  tbody.setAttribute("id", "tbc");

  

  for(i = 0; i < livres.length; i++) {  

    ligne = '<tr>';

    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

    ligne += '<td class=prx>' + livres[i].prix + '</td>';

    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';

    ligne += '</tr>';



    tbody.innerHTML += ligne;



    table.appendChild(tbody);

  }

}



var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]



afficherCatalogue(data);

/* CSS */

table {

  text-align: center;

}

thead td {

  font-weight: 700;

}

td {

  padding: 10px 10px;

}

<!-- HTML -->

<table id="table">

  <thead>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

  </thead>

</table>

/* JavaScript */

var table = document.getElementById("table");



function afficherCatalogue(livres){

  var ligne = "";  

  var tbody = document.createElement('tbody');

  

  tbody.setAttribute("id", "tbc");

  

  for(i = 0; i < livres.length; i++) {  

    ligne = '<tr>';

    ligne += '<td class=ref>' + Object.keys(livres[i])[0] + '</td>'; 

    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  

    ligne += '<td class=tit>' + livres[i].titre + '</td>'; 

    ligne += '<td class=prx>' + livres[i].prix + '</td>';

    ligne += '<td class=ach>' + '<button type="button">Button ' + i + '</button>' + '</td>';

    ligne += '</tr>';



    tbody.innerHTML += ligne;



    table.appendChild(tbody);

  }

}



var data = [{First: "first", auteur: 100, titre: 200, prix: 300}, {Second: "second", auteur: 150, titre: 250, prix: 350}, {Third: "third", auteur: 200, titre: 300, prix: 400}]



afficherCatalogue(data);

/* CSS */

table {

  text-align: center;

}

thead td {

  font-weight: 700;

}

td {

  padding: 10px 10px;

}

<!-- HTML -->

<table id="table">

  <thead>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

  </thead>

</table>

edited Jan 1 at 22:22

answered Jan 1 at 20:48

AndrewL64

10.2k41947

edited Jan 1 at 22:22

answered Jan 1 at 20:48

AndrewL64

10.2k41947

answered Jan 1 at 20:48

AndrewL64

10.2k41947

answered Jan 1 at 20:48

AndrewL64

10.2k41947

Thank you ! that worked great. indeed creating tbody with js is better

– fryx
Jan 1 at 22:20

@fryx Glad I could help mate. Cheers!!

– AndrewL64
Jan 1 at 22:22

add a comment |

Thank you ! that worked great. indeed creating tbody with js is better

– fryx
Jan 1 at 22:20

@fryx Glad I could help mate. Cheers!!

– AndrewL64
Jan 1 at 22:22

Thank you ! that worked great. indeed creating tbody with js is better

– fryx
Jan 1 at 22:20

@fryx Glad I could help mate. Cheers!!

– AndrewL64
Jan 1 at 22:22

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu