html-table – Page 4 – Tarik Billa

Add/delete row from a table

August 29, 2023 by Tarik

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

Regex Non-Greedy (Lazy)

August 27, 2023 by Tarik

For non greedy match, try this <TD.*?>

Find parent table tag from td

August 26, 2023 by Tarik

You need to use closest() function: $(‘td’).closest(‘table’);

Divide HTML table rows into labelled sections

August 26, 2023 by Tarik

HTML5 specification isn’t saying there can be only one <TBODY> section. Your code is OK. One more example: <table> <thead> <tr> <th>Fruits</th> <th>Vitamin A</th> <th>Vitamin C</th> </tr> </thead> <tbody id=”section1″> <tr> <th>Apples</th> <td>98 ui</td> <td>8.4 mg</td> </tr> </tbody> <tbody id=”section2″> <tr> <th>Oranges</th> <td>295 ui</td> <td>69.7 mg</td> </tr> <tr> <th>Bananas</th> <td>76 ui</td> <td>10.3 mg</td> </tr> </tbody> … Read more

How do I vertically align a div inside a table cell?

August 25, 2023 by Tarik

There is no need to defineheight in .divClass . write like this: .cellClass { vertical-align:middle; height:90px; border:1px solid red; } Check this http://jsfiddle.net/ncrKH/

show/hide html table columns using css

August 22, 2023 by Tarik

One line of code using jQuery: $(‘td:nth-child(2)’).hide(); // If your table has header(th), use this: //$(‘td:nth-child(2),th:nth-child(2)’).hide(); Source: Hide a Table Column with a Single line of jQuery code

How to delete border spacing in table

August 21, 2023 by Tarik

Your table be like below by default and set the css rules on tables ID or Class <table border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <th>1</th> <th>2</th> </tr> </table> css: border-collapse: collapse;

HTML Table to Excel Javascript

August 21, 2023 by Tarik

You can use download attribute supported by modern browsera for a anchor element. First modify your HTML by adding an invisible anchor: <a id=”dlink” style=”display:none;”></a> <input type=”button” onclick=”tableToExcel(‘tablename’, ‘name’, ‘myfile.xls’)” value=”Export to Excel”> Notice also that the call to function tableToExcel now has 3rd parameter – where you specify file name. Now use this modified … Read more

Insert th in thead

August 14, 2023 by Tarik

You can also use the insertCell method as originally requested. You just have to change the outerHTML to overwrite the <td> created by the insertCell method: var table = document.createElement(“TABLE”) var row = table.insertRow(0); row.insertCell(0).outerHTML = “<th>First</th>”; // rather than innerHTML To match the example given: HTML <table id=”table”> <thead> <tr> <th>First</th> </tr> <thead> </table> … Read more

HTML Table width in percentage, table rows separated equally

August 13, 2023 by Tarik

Use the property table-layout:fixed; on the table to get equally spaced cells. If a column has a width set, then no matter what the content is, it will be the specified width. Columns without a width set will divide whatever room is left over among themselves. <table style=”table-layout:fixed;”> <tbody> <tr> <td>gobble de gook</td> <td>mibs</td> </tr> … Read more