Display a table using javascript

Question

I have to display some information like this example :

Name : myname

But what I get is like this :

Name :
myname

I think when I use insertRow in javascript I create a new row ! but I like to insert a new column in an existing table . Can any one help me please to get this display?

function Donnee() {
  $.ajax({
    url: "/MyUrl",
    type: "GET",
    dataType: "xml",
    success: function(xml) {
      $(xml).find('occurrences').each(function() {
        var row = document.getElementById("row-nom");
        var cell1 = document.getElementById("cell-nom");
        if (row === null) {
          var row = table.insertRow(3);
          row.id = "row-nom";
        }

        if (cell1 === null) {
          var cell1 = row.insertCell(0);
          cell1.id = "cell-nom";
        }

        $(this).find("occurrence").each(function() {
          datasection = $(this).attr('datasection');
          if (datas == "mytable") {
            $(this).find("data").each(function() {
              var item = $(this).find('item').text();
              var value = $(this).find('value').text();
              if (item == "NMPRES") {
                NMPRES = $(this).find('value').text();
              }
            });
            cell1.innerHTML = NMPRES;
          }
        });
      });
    }
  });
}

<html>
<table id="Table">
  <tr>
    <td>
      <div> personal info </div>
    </td>
  </tr>
  <div>
    <tr>
      <td> Name </td>
      <tr>
  </div>

</html>

You'd probably have an easier time using some kind of client-side templating system rather than using jQuery to repeatedly insert the data. You could also use a Javascript framework, though that would be overkill if that's all you use it for. — Matthew Daly, Oct 12 '17 at 08:09
Your markup is invalid, `datas` is undefined, `datasection` is unused as `value`, you redeclare variables that were previously declared, and you iterate trough lists but you don't seem to create new elements for each occurence, may be a desired behaviour but I doubt it. — Serge K., Oct 12 '17 at 08:09
Possible duplicate of [Inserting a table column with jQuery](https://stackoverflow.com/questions/1655319/inserting-a-table-column-with-jquery) — Rick, Oct 12 '17 at 08:11
Your problem should be resolved with css. Also you need to read docs before you are using function. Function `table.addRow` did not add `
` tag into your code, but it insert `tr` (table row) tag into specified position. And also, https://www.youtube.com/watch?v=seKLsHOkN1U — degr, Oct 12 '17 at 08:38

score 1 · Accepted Answer · answered Oct 12 '17 at 08:21

Don't create a new column, create a new row and transpose the table. After filling all the rows append the following code.

$("#Table").each(function() {
    var $this = $(this);
    var newrows = [];
    $this.find("tr").each(function(){
        var i = 0;
        $(this).find("td").each(function(){
            i++;
            if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
            newrows[i].append($(this));
        });
    });
    $this.find("tr").remove();
    $.each(newrows, function(){
        $this.append(this);
    });
});

Display a table using javascript

1 Answers1