Showing posts with label tables. Show all posts
Showing posts with label tables. Show all posts

Create tables dynamically from user input using PHP

In this tutorial we are going to learn about how to generate table columns and rows dynamically from user input. 

Very simple code generate dynamic table.


Here is the code.

PHP code get requested number of columns and rows through loops and then simply display the table.

You always can make it more attractive by adding CSS styles.   



<?php
 
$createtable = '';
if ($_POST){

        $createtable .= '<table border="1">';
for ($i = 0; $i < $_POST['line']; $i++) {

$createtable .= '<tr>';
for ($j = 0; $j < $_POST['colunn']; $j++) {

$createtable .= '<td width="50">&nbsp;</td>';
}

$createtable .= '</tr>';
}

$createtable .= '</table>';
}

?>

<form action="" method="post">

<table border="0" width="200">

<tr>
<td width="80"><label>Column:</label></td>
<td width="120"><input type="text" name="colunn"></td>
</tr>

<tr>
<td><label>Line:</label></td>
<td><input type="text" name="line"></td>
</tr>

<tr>
<td colspan="2" align="right">
<input type="submit" value="Create Table">
</td>
</tr>

</table>

</form>

<?php

echo $createtable;

 ?>



For any queries or any new code requests comment below in the comment section.

How to add filter, search and pagination options to your table using javascript & datatable?

Having pagination, search and filter options to your data table is very much essential. which changes the complete view of your table presentation.

Here is the simplest way of adding these three options to your table.
Add this block of code in your head section.
<link rel="stylesheet" 
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" 
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
</script>
<script>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</script>
Then add id and class to your table tag
<table id="example" class="display">
    <thead>
    <tr>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
    </tr>
    </tbody>
</table>
That's it your are done with the most usefull feature for tables.
Result:

Reference & For more vistit the link of official datable organization
https://datatables.net/examples/basic_init/zero_configuration.html

Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts