Rectangle 27 94

var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td/>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(myList, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onLoad="buildHtmlTable('#excelDataTable')">
  <table id="excelDataTable" border="1">
  </table>
</body>

Hi @Manish-mulani this did not work to me, could u check again

Hi, I tried to get the data from a url, but it doesn't seem to work

tr
td

javascript - Convert json data to a html table - Stack Overflow

javascript html json html-table
Rectangle 27 3

Converting a 2D JavaScript array to an HTML table

To turn a 2D JavaScript array into an HTML table, you really need but a little bit of code :

function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

$('body').append(arrayToTable([
    ["John","Slegers",34],
    ["Tom","Stevens",25],
    ["An","Davies",28],
    ["Miet","Hansen",42],
    ["Eli","Morris",18]
]));
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

If you want to load your 2D array from a JSON file, you'll also need a little bit of Ajax code :

$.ajax({
    type: "GET",
    url: "data.json",
    dataType: 'json',
    success: function (data) {
        $('body').append(arrayToTable(data));
    }
});

javascript - Convert JSON array to an HTML table in jQuery - Stack Ove...

javascript jquery json ajax html-table
Rectangle 27 46

I'm assuming you want to add this row to the <tbody> element, and simply using append() on the <table> will insert the <tr> outside the <tbody>, with perhaps undesirable results.

$('a').click(function() {
   $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});

EDIT: Here is the complete source code, and it does indeed work: (Note the $(document).ready(function(){});, which was not present before.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a').click(function() {
       $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
    });
});
</script>
<title></title>
</head>
<body>
<a href="javascript:void(0);">Link</a>
<table id="myTable">
  <tbody>
    <tr>
      <td>test</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Did not work.. :(

in my experience you cannot modify the html contents of a table. Try using document.createElement("tr"), and document.appendElement()

I modified your source so that it should work correctly. (Note the edit above) I didn't notice this before, but you didn't have the $(document).ready() included, which basically breaks everything. Unless you wait for the ready() event to fire, the DOM isn't loaded and your jQuery selector probably won't find what it is looking for.

Don't forget do include "tbody" as show in the source example.

html - How do you append rows to a table using jQuery? - Stack Overflo...

jquery html
Rectangle 27 46

I'm assuming you want to add this row to the <tbody> element, and simply using append() on the <table> will insert the <tr> outside the <tbody>, with perhaps undesirable results.

$('a').click(function() {
   $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});

EDIT: Here is the complete source code, and it does indeed work: (Note the $(document).ready(function(){});, which was not present before.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a').click(function() {
       $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
    });
});
</script>
<title></title>
</head>
<body>
<a href="javascript:void(0);">Link</a>
<table id="myTable">
  <tbody>
    <tr>
      <td>test</td>
    </tr>
  </tbody>
</table>
</body>
</html>

in my experience you cannot modify the html contents of a table. Try using document.createElement("tr"), and document.appendElement()

I modified your source so that it should work correctly. (Note the edit above) I didn't notice this before, but you didn't have the $(document).ready() included, which basically breaks everything. Unless you wait for the ready() event to fire, the DOM isn't loaded and your jQuery selector probably won't find what it is looking for.

Don't forget do include "tbody" as show in the source example.

html - How do you append rows to a table using jQuery? - Stack Overflo...

jquery html
Rectangle 27 20

Here you have a simple table sorter with a Fiddle demo here:

<table id="sort-table">
    <tbody>
        <tr><td>he</td></tr>
        <tr><td>stackoverflow</td></tr>
        <tr><td>by</td></tr>
        <tr><td>vote</td></tr>
        <tr><td>post</td></tr>
        <tr><td>And</td></tr>
        <tr><td>clicking</td></tr>
        <tr><td>up</td></tr>
        <tr><td>did</td></tr>
    </tbody>
</table>
<br>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>
$('.sort-table').click(function(e) {
    e.preventDefault();                    // prevent default behaviour

    var sortAsc = $(this).hasClass('asc'), // ASC or DESC sorting
        $table  = $('#sort-table'),        // cache the target table DOM element
        $rows   = $('tbody > tr', $table); // cache rows from target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).text();
        var keyB = $('td',b).text();

        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;  // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;  // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                  // append rows after sort
    });
});

Here's a tiny jQuery plug-in that lets you sort lists, tables, or anything else, by providing a custom callback that returns the value to sort by.

@milano Sorry for the HUGE delay, there was a typo ">" should be "<" to reverse from ASC to DESC :) Fixed, tks.

Thanks this saved me. I was using a complex prepend, append, insert logic earlier and this cleaned a lot.

jQuery - sort a table after adding a row to it - Stack Overflow

jquery
Rectangle 27 6

Here is some hacketi hack code. I wanted to maintain a row template in an HTML page. Table rows 0...n are rendered at request time, and this example has one hardcoded row and a simplified template row. The template table is hidden, and the row tag must be within a valid table or browsers may drop it from the DOM tree. Adding a row uses counter+1 identifier, and the current value is maintained in the data attribute. It guarantees each row gets unique URL parameters.

I have run tests on InternetExplorer8, InternetExplorer9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (with Symbian 3), Android stock and Firefox beta browsers.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: I give all credits to the jQuery team; they deserve everything. JavaScript programming without jQuery - I don't even want think about that nightmare.

javascript - Add table row in jQuery - Stack Overflow

javascript jquery html-table
Rectangle 27 6

Here is some hacketi hack code. I wanted to maintain a row template in an HTML page. Table rows 0...n are rendered at request time, and this example has one hardcoded row and a simplified template row. The template table is hidden, and the row tag must be within a valid table or browsers may drop it from the DOM tree. Adding a row uses counter+1 identifier, and the current value is maintained in the data attribute. It guarantees each row gets unique URL parameters.

I have run tests on InternetExplorer8, InternetExplorer9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (with Symbian 3), Android stock and Firefox beta browsers.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: I give all credits to the jQuery team; they deserve everything. JavaScript programming without jQuery - I don't even want think about that nightmare.

javascript - Add table row in jQuery - Stack Overflow

javascript jquery html-table
Rectangle 27 6

Here is some hacketi hack code. I wanted to maintain a row template in an HTML page. Table rows 0...n are rendered at request time, and this example has one hardcoded row and a simplified template row. The template table is hidden, and the row tag must be within a valid table or browsers may drop it from the DOM tree. Adding a row uses counter+1 identifier, and the current value is maintained in the data attribute. It guarantees each row gets unique URL parameters.

I have run tests on InternetExplorer8, InternetExplorer9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (with Symbian 3), Android stock and Firefox beta browsers.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: I give all credits to the jQuery team; they deserve everything. JavaScript programming without jQuery - I don't even want think about that nightmare.

javascript - Add table row in jQuery - Stack Overflow

javascript jquery html-table
Rectangle 27 6

Here is some hacketi hack code. I wanted to maintain a row template in an HTML page. Table rows 0...n are rendered at request time, and this example has one hardcoded row and a simplified template row. The template table is hidden, and the row tag must be within a valid table or browsers may drop it from the DOM tree. Adding a row uses counter+1 identifier, and the current value is maintained in the data attribute. It guarantees each row gets unique URL parameters.

Here is some hacketi hack code. I wanted to maintain a row template in an HTML page. Table rows 0...n are rendered at request time, and this example has one hardcoded row and a simplified template row. The template table is hidden, and the row tag must be within a valid table or browsers may drop it from the DOM tree. Adding a row uses counter+1 identifier, and the current value is maintained in the data attribute. It guarantees each row gets unique URL parameters.

I have run tests on InternetExplorer8, InternetExplorer9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (with Symbian 3), Android stock and Firefox beta browsers.

I have run tests on Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (with Symbian 3), Android stock and Firefox beta browsers.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}
<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: I give all credits to the jQuery team; they deserve everything. JavaScript programming without jQuery - I don't even want think about that nightmare.

PS: I give all credits to the jQuery team; they deserve everything. JavaScript programming without jQuery - I don't even want think about that nightmare.

javascript - Add table row in jQuery - Stack Overflow

javascript jquery html-table
Rectangle 27 3

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of rows to insert');
  } else {

    $tbody = $('table tbody');
    $row = $tbody.find('tr:last');

    additionalRows = new Array(numNewRows + 1).join($row[0].outerHTML);

    $tbody.append(additionalRows);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>Col1</th>
    <th>Col2</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<input type="number" id="insert-rows-amnt" />
<button id="add-row" type="button">Add Rows</button>

Firstly, don't trust user input, verify you actually have a number, try to parse it and be explicit. Always use the radix, parseInt() can try to be too clever for its own good. The result could be NaN or a number, so check for these:

var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

if (isNaN(numNewRows) || numNewRows <= 0) {

If you're using JQuery, cache found objects, finding them isn't free, a search is done every time you pass a string selector, so if you've already found it, use it. This ins't going to set the world on fire, but it's a good habit to get into.

Onto the meat of the method, there are two methods for inserting HTML quickly. HTML updates are like Excel Worksheet updates, no small amount of processing goes on when you change the dom. Most of the time this is negligible, but if you're inserting a huge amount of html it's something to be aware of.

new Array(numNewRows + 1).join($row[0].outerHTML);

This replicates a string x number of times. It works by initialising an array of x dimensions and then joining it using a given string as the text between the elements.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript jquery
Rectangle 27 2

I don't have enough reputation to comment on Zuul's answer, but it is not always working. Check this fiddle:

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).text();
        var keyB = $('td',b).text();

        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;     // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                    // append rows after sort
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table id="sort-table">
    <tbody>
<tr><td>Text 2003-01-27.pdf</td></tr>
<tr><td>Text 2004-03-23.pdf</td></tr>
<tr><td>Text 2004-04-01.pdf</td></tr>
<tr><td>Text 2004-12-31.pdf</td></tr>
<tr><td>Text 2010-04-14.pdf</td></tr>
<tr><td>Text 2011-02-07.pdf</td></tr>
<tr><td>Medic 2004-08-24.pdf</td></tr>
<tr><td>Bank 2009-10-06.pdf</td></tr>
<tr><td>Family 2010-10-19.pdf</td></tr>
<tr><td>Statement 2002-03-06.pdf</td></tr>
<tr><td>Statement 2002-03-06.pdf</td></tr>
<tr><td>Statement 2004-06-30.pdf</td></tr>
<tr><td>Statement 2010-03-31.pdf</td></tr>
<tr><td>Next.pdf</td></tr>
<tr><td>School 2002-03-04.pdf</td></tr>
<tr><td>School 2003-06-23.pdf</td></tr>
<tr><td>School 2010-06-10.pdf</td></tr>
<tr><td>Deal 2002-03-04.pdf</td></tr>
<tr><td>Deal 2002-06-03.pdf</td></tr>
<tr><td>Deal 2003-06-03.pdf</td></tr>
<tr><td>Vacation 2009-08-10.pdf</td></tr>
<tr><td>Vacation 2007-03-26.pdf</td></tr>
<tr><td>Vacation 2009-08-10.pdf</td></tr>
<tr><td>Vacation 2008-03-19.pdf</td></tr>
<tr><td>Vacation 2009-03-23.pdf</td></tr>
<tr><td>Vacation 2012-09-21.pdf</td></tr>
<tr><td>Vacation 2012-09-17.pdf</td></tr>
<tr><td>Vacation 2014-09-25.pdf</td></tr>
<tr><td>Vacation 2014-10-23.pdf</td></tr>
<tr><td>Work 2004-06-21.pdf</td></tr>
<tr><td>Work 2009-09-09.pdf</td></tr>
<tr><td>Work 2010-05-01.pdf</td></tr>
<tr><td>AGR 2002-03-05.pdf</td></tr>
<tr><td>AGR 2004-10-28.pdf</td></tr>
<tr><td>AGR 2005-11-22.pdf</td></tr>
<tr><td>AGR 2011-01-20.pdf</td></tr>
    </tbody>
</table>
<br>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>

jQuery - sort a table after adding a row to it - Stack Overflow

jquery
Rectangle 27 3

For very advanced JSON objects to HTML tables you can try My jQuery Solution that is based on this closed thread.

var myList=[{"name": "abc","age": 50},{"name": {"1": "piet","2": "jan","3": "klaas"},"age": "25","hobby": "watching tv"},{"name": "xyz","hobby": "programming","subtable": [{"a": "a","b": "b"},{"a": "a","b": "b"}]}];

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable() {
      addTable(myList, $("#excelDataTable"));
 }

function addTable(list, appendObj) {
    var columns = addAllColumnHeaders(list, appendObj);

    for (var i = 0; i < list.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = list[i][columns[colIndex]];

            if (cellValue == null) {
                cellValue = "";
            }

            if (cellValue.constructor === Array)
            {
                $a = $('<td/>');
                row$.append($a);
                addTable(cellValue, $a);

            } else if (cellValue.constructor === Object)
            {

                var array = $.map(cellValue, function (value, index) {
                    return [value];
                });

                $a = $('<td/>');
                row$.append($a);
                addObject(array, $a);

            } else {
                row$.append($('<td/>').html(cellValue));
            }
        }
        appendObj.append(row$);
    }
}


function addObject(list, appendObj) {
    for (var i = 0; i < list.length; i++) {
        var row$ = $('<tr/>');

        var cellValue = list[i];

        if (cellValue == null) {
            cellValue = "";
        }

        if (cellValue.constructor === Array)
        {
            $a = $('<td/>');
            row$.append($a);
            addTable(cellValue, $a);

        } else if (cellValue.constructor === Object)
        {

            var array = $.map(cellValue, function (value, index) {
                return [value];
            });

            $a = $('<td/>');
            row$.append($a);
            addObject(array, $a);

        } else {
            row$.append($('<td/>').html(cellValue));
        }
        appendObj.append(row$);
    }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(list, appendObj)
{
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < list.length; i++) {
        var rowHash = list[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    appendObj.append(headerTr$);

    return columnSet;
}

javascript - Convert JSON array to an HTML table in jQuery - Stack Ove...

javascript jquery json ajax html-table
Rectangle 27 30

If you don't wish to use jQuery, there are a couple of simple functions you could use, like cloneNode(), createElement() and appendChild(). Here is a simple demonstration that appends a row to the end of the table using either the clone or create method. Tested in IE8 and FF3.5.

<html>

<head>
  <script type="text/javascript">
    function cloneRow() {
      var row = document.getElementById("rowToClone"); // find row to copy
      var table = document.getElementById("tableToModify"); // find table to append to
      var clone = row.cloneNode(true); // copy children too
      clone.id = "newID"; // change id or other attributes/contents
      table.appendChild(clone); // add new row to end of table
    }

    function createRow() {
      var row = document.createElement('tr'); // create row node
      var col = document.createElement('td'); // create column node
      var col2 = document.createElement('td'); // create second column node
      row.appendChild(col); // append first column to row
      row.appendChild(col2); // append second column to row
      col.innerHTML = "qwe"; // put data in first column
      col2.innerHTML = "rty"; // put data in second column
      var table = document.getElementById("tableToModify"); // find table to append to
      table.appendChild(row); // append row to table
    }
  </script>
</head>

<body>
  <input type="button" onclick="cloneRow()" value="Clone Row" />
  <input type="button" onclick="createRow()" value="Create Row" />
  <table>
    <tbody id="tableToModify">
      <tr id="rowToClone">
        <td>foo</td>
        <td>bar</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Create clone of table row and append to table in JavaScript - Stack Ov...

javascript
Rectangle 27 30

If you don't wish to use jQuery, there are a couple of simple functions you could use, like cloneNode(), createElement() and appendChild(). Here is a simple demonstration that appends a row to the end of the table using either the clone or create method. Tested in IE8 and FF3.5.

<html>

<head>
  <script type="text/javascript">
    function cloneRow() {
      var row = document.getElementById("rowToClone"); // find row to copy
      var table = document.getElementById("tableToModify"); // find table to append to
      var clone = row.cloneNode(true); // copy children too
      clone.id = "newID"; // change id or other attributes/contents
      table.appendChild(clone); // add new row to end of table
    }

    function createRow() {
      var row = document.createElement('tr'); // create row node
      var col = document.createElement('td'); // create column node
      var col2 = document.createElement('td'); // create second column node
      row.appendChild(col); // append first column to row
      row.appendChild(col2); // append second column to row
      col.innerHTML = "qwe"; // put data in first column
      col2.innerHTML = "rty"; // put data in second column
      var table = document.getElementById("tableToModify"); // find table to append to
      table.appendChild(row); // append row to table
    }
  </script>
</head>

<body>
  <input type="button" onclick="cloneRow()" value="Clone Row" />
  <input type="button" onclick="createRow()" value="Create Row" />
  <table>
    <tbody id="tableToModify">
      <tr id="rowToClone">
        <td>foo</td>
        <td>bar</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Create clone of table row and append to table in JavaScript - Stack Ov...

javascript
Rectangle 27 2

If you want to achieve horizontal scrolling then you can use 3 containers.

  • For the columns that you want to scroll. Set the overflow-x style of this container to auto

I think what he means is that he wants the Name and Total columns to stay in place, while Score1, Score2, etc, all scroll. This is possible in MS Excel, and I see no reason why it would be confusing to the user. However, I have no clue as to how to accomplish it.

Yes, that's what I'm after, but I'm not sure this'll accomplish it. The difficulty with putting containers around the sections (apart from invalid html) is that columns aren't consecutively defined. The <td> tag repeats for each row.

It could be better to stuck with your initial design itself. Because if you alter your middle columns then you have to take into consideration the height of the scroll bars too, so that every item in a single row aligns to the same line.

The div has no fixed height though - I'm happy for the height to expand as it does.

javascript - How do I freeze the first and last columns of an html tab...

javascript html layout html-table
Rectangle 27 3

rowIndex is a DOM property, it can't be used on a jQuery object. Also, $("#myTable tr") returns a collection of all the rows, so the index won't be just the row that you're appending to.

Instead of supplying HTML directly in the .append() call, you can give it a function. This will then be called for each element in the collection (similar to calling .append() within .each()), and its return value will be appended.

You were also missing the closing " in the name attributes.

$(document).ready(function() {
  $("#addBtn").click(function() {
    $("#myTable thead tr").append('<th colspan="3">New Header</th>');
    $('#myTable tbody tr').append(function(i) {
      var name = 'interActivity' + i;
      return '<td><input type="radio" name="' + name + '" value="Y"></td><td><input type="radio" name="' + name + '" value="N"></td><td><input type="radio" name="' + name + '" value="NA">';
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

  <table border="1" id="myTable">
    <thead>
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>R1 Column1</td>
        <td>R1 Column2</td>
      </tr>
      <tr>
        <td>R2 Column1</td>
        <td>R2 Column2</td>
      </tr>
      <tr>
        <td>R3 Column1</td>
        <td>R3 Column2</td>
      </tr>

    </tbody>
  </table>

  <br>
  <input id="addBtn" type="button" value="Add column">

</form>

html - jQuery : Dynamic table - row index - Stack Overflow

jquery html
Rectangle 27 0

$(function() {
  $("#upload").bind("click", function() {
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test($("#fileUpload").val().toLowerCase())) {
      if (typeof(FileReader) != "undefined") {
        var reader = new FileReader(),
          table = $("<table>"),
          separator = ',',
          rows,
          rowLength;

        reader.onload = function(e) {
          rows = e.target.result.split(/[\r\n|\n]+/);
          rowLength = rows.length;

          for (var i = 0; i < rowLength; i++) {
            var row = $("<tr>"),
              cells = rows[i].split(separator),
              cellLength = cells.length,
              cell;

            for (var j = 0; j < cellLength; j++) {
              // Special case for the first row
              cell = (i === 0) ? $("<th>") : $("<td>");
              cell.html(cells[j]);
              row.append(cell);
            }

            // Special case for first row (thead)
            if (i === 0) {
              row = $('<thead>').html(row);
            }
            table.append(row);
          }
          $("#dvCSV").html('');
          $("#dvCSV").append(table);
        }
        reader.readAsText($("#fileUpload")[0].files[0]);
      } else {
        alert("This browser does not support HTML5.");
      }
    } else {
      alert("Please upload a valid CSV file.");
    }
  });
});
a {
  display: block;
}
table {
  border: 1px solid #ccc;
}
table th {
  background-color: #F7F7F7;
  color: #333;
  font-weight: bold;
}
table th,
table td {
  padding: 5px;
  border-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="http://samplecsvs.s3.amazonaws.com/SalesJan2009.csv">Dummy CSV</a>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
<div id="dvCSV">
</div>

javascript - improve csv file reader by removing quotes from fields, s...

javascript jquery html css csv
Rectangle 27 0

jQuery's append() method can only insert elements or text nodes into the DOM. </tr><tr> is not an element or a text node.

Instead, you could insert a row after each existing row, using append() to move the last cell of the previous row to the new row:

$('.desctable tr').each(function() {
  $('<tr>')                          //Create new row.
    .append($(this).find('td:last')) //Add the last cell of the current row to it.
    .insertAfter($(this));           //Place it after the current row.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="desctable">
  <tr>
    <td>Table Data 1</td>
    <td>Table Data 2</td>
  </tr>
  <tr>
    <td>Table Data 3</td>
    <td>Table Data 4</td>
  </tr>
</table>
append

Just also wrong :) (i mean your text with "not HTML code"

Actually, you make a very good point. I've edited my explanation.

Ok, now i understand. It's a weird answer anyway. append for sure make real DOM elements out of it, but a DOM element is represented with an HTML code, so...

javascript - Insert Additional Table Rows with jQuery - Stack Overflow

javascript jquery html html-table