Member Avatar for burt.munn 
I need to add a nested table to my php page so that when I put it in my browser, just a table will appear with 2 columns and 3 rows. In the top left column I need the word "WIDTH", and right below that it will say "HEIGHT". The bottom box should be merged with a "SUBMIT" button. The top right and middle boxes will be blank, but when you add numbers to the 2 boxes, ie. 3 on top and 4 in the middle and hit the "SUBMIT" button, a 3 X 4 tables will come up. You should be able to add any numbers to the boxes and that size table will come up ie. 10 X 10 and so on. Can anyone please give me a hand. Below is what I have and I just can't figure it out. I guess it's called a nested loop construct. I appreciate any help that I get!
Respectfully
<?php
$width = 10;
$height = 10;
functionreateTable($width, $height)
{
$i =1;
$table = '<table border = "1">';
for ($r = 0; $r <$width; $c++)
{
$table .= '<tr>';
for <table ,= "<td> $i </td>;
$ i++;
}
$table .= <tr>';
}
$table .= '</table>';
return $table;
}
echo createTable ($width, $height);
?>
  • 2 Contributors
  • 9 Replies
  • 930 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol

Recommended Answers

All 9 Replies

Member Avatar for burt.munn

If that demo was just made with PHP that is exactly what I need. Thanks

Member Avatar for diafol

Demo code:

<?php
$useJS = (isset($_GET['usejs'])) ? 1 : 0;

function createTable($rows,$cols)
{
    $i=1;
    $output = '<p>Produced by <span class="php">PHP</span></p><table class="php">';
    for($r=0;$r<$rows;$r++)
    {
        $output .= '<tr>';
        for($c=0;$c<$cols;$c++)
        {
            $output .= '<td>'.$i.'</td>';
            $i++;   
        }
        $output .= '</tr>';  
    }
    $output .= '</table>';
    return $output;
}
?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create HTML Tables with JS or PHP</title>
<style>
table
{
    border-collapse:collapse;
    border: solid 1px black;
}

table tr td, table tr th
{
    border: solid 1px black;
}

.js{
    background-color:yellow;    
}
.php{
    background-color:cyan;
}

</style>
</head>
<body>
<h3>JS and PHP Table Creator</h3>
<p>Decide which language to use for creating a html table.</p>
<p>If using PHP (Use JS checkbox <strong>unchecked</strong>), you will see the url updating. Indeed you can control the table from the url.</p>
<p>If using JS, the url will not update.</p>

<form>
<table>
    <tr><th>Cols</th><td><input id="cols" name="cols" value="<?php echo (isset($_GET['cols'])) ? intval($_GET['cols']) : 1;?>" type="number" min="1" max="50" /></td></tr>
    <tr><th>Rows</th><td><input id="rows" name="rows" value="<?php echo (isset($_GET['rows'])) ? intval($_GET['rows']) : 1;?>" type="number" min="1" max="50" /></td></tr>
    <tr><td><input id="usejs" name="usejs" type="checkbox" <?php if($useJS) echo 'checked="checked"';?> /> Use JS</td><td><input id="sub" value="Create" type="submit" /></td></tr>
</table>
</form>

<div id="newtable">
<?php 
if(!$useJS && isset($_GET['rows']) && isset($_GET['cols']))
{
    $rows = (int) $_GET['rows'];
    $cols = (int) $_GET['cols'];
    echo createTable($rows,$cols);
}
?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var useJS = <?php echo $useJS;?>;

$('#usejs').click(function(){
    useJS = this.checked;
});


$('#sub').click(function(e){
    if(useJS)
    {
        e.preventDefault();
        var rows = parseInt($('#rows').val());  
        var cols = parseInt($('#cols').val());
        $('#newtable').html(createTable(rows,cols));
    }   
})  

function createTable(rows,cols)
{
    i=1;
    output = '<p>Produced by <span class="js">JS</span></p><table class="js">';
    for(var r=0;r<rows;r++)
    {
        output += '<tr>';
        for(var c=0;c<cols;c++)
        {
            output += '<td>'+i+'</td>';
            i++;    
        }
        output += '</tr>';   
    }
    output += '</table>';
    return output;
}
</script>
</body>
</html>
Edited by diafol
Member Avatar for burt.munn

can this be done without java script?

Member Avatar for diafol

Yes. Just take out all the js

change

if(!$useJS && isset($_GET['rows']) && isset($_GET['cols']))

to

if(isset($_GET['rows']) && isset($_GET['cols']))

What did your last slave die of? :)

Edited by diafol
Member Avatar for burt.munn

Sorry, I really do appreciate your help!

Member Avatar for burt.munn

That didn't work for me! Sorry

Member Avatar for diafol

Show your code. "That didn't work for me" isn't really much help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.