Add/delete row from a table

JavaScript with a few modifications: function deleteRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } And the HTML with a little difference: <table id=”dsTable”> <tbody> <tr> <td>Relationship Type</td> <td>Date of Birth</td> <td>Gender</td> </tr> <tr> <td>Spouse</td> <td>1980-22-03</td> <td>female</td> <td><input type=”button” value=”Add” onclick=”add()”/></td> <td><input type=”button” value=”Delete” onclick=”deleteRow(this)”/></td> </tr> <tr> <td>Child</td> <td>2008-23-06</td> <td>female</td> <td><input type=”button” value=”Add” onclick=”add()”/></td> <td><input type=”button” … Read more

HTML — two tables side by side [duplicate]

Depending on your content and space, you can use floats or inline display: <table style=”display: inline-block;”> <table style=”float: left;”> Check it out here: Documentation CSS display on MDN – CSS float on MDN –

Wrapping HTML table rows in tags

Edit 2021: It seems nowadays there’s better options that are more semantic and more screen-reader-friendly. Check out e.g. Jans solution. Original answer: as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach: HTML: <div class=”table”> <a class=”table-row” href=”/mylink”> <div class=”table-cell”>…</div> <div class=”table-cell”>…</div> … Read more

Export HTML table to CSV using vanilla javascript

Should work on every modern browser and without jQuery or any dependency, here my implementation : // Quick and simple export target #table_id into a csv function download_table_as_csv(table_id, separator=”,”) { // Select rows from table_id var rows = document.querySelectorAll(‘table#’ + table_id + ‘ tr’); // Construct csv var csv = []; for (var i = … Read more

How can I parse JSON into a html table using PHP?

If you want recursive way: public static function jsonToDebug($jsonText=””) { $arr = json_decode($jsonText, true); $html = “”; if ($arr && is_array($arr)) { $html .= self::_arrayToHtmlTableRecursive($arr); } return $html; } private static function _arrayToHtmlTableRecursive($arr) { $str = “<table><tbody>”; foreach ($arr as $key => $val) { $str .= “<tr>”; $str .= “<td>$key</td>”; $str .= “<td>”; if (is_array($val)) … Read more

How to export an HTML table as a .xlsx file

A great client-side tool for exporting html tables to xlsx, xls, csv, or txt is TableExport by clarketm (me). It is a simple, easy-to-implement, full-featured library with a bunch of configurable properties and methods. Install $ npm install tableexport Usage TableExport(document.getElementsByTagName(“table”)); // OR using jQuery $(“table”).tableExport(); Documentation Sample apps to get you started TableExport + … Read more