JasonDavis JasonDavis - 1 month ago 7
PHP Question

Generate HTML Table from textarea data with PHP

I want to make a Table generator in PHP which will take each new line in a textarea form field and count each line as a new table cell. Each textarea will count as a new table column.

So based on this HTML form below it has 4 textarea fields which would result in a table with 4 columns

<tr>


<form action="" id="tablegenform" method="post">
<textarea name="table-column[]">Enter table column row cell data on each line</textarea>
<textarea name="table-column[]">Enter table column row cell data on each line</textarea>
<textarea name="table-column[]">Enter table column row cell data on each line</textarea>
<textarea name="table-column[]">Enter table column row cell data on each line</textarea>
<input type="submit">
</form>


The part which makes it a little more difficult for me to wrap my head around in the code is that each new line item in the textarea is a new table row.

My first approach was something like this...

$tableColumnsData = isset($_POST['table-column'])?$_POST['table-column']:"";

foreach($tableColumnsData as $columnKey => $columns){

// turns each new line in textarea into array item
$columnRowItems = explode("\n", str_replace("\r", "", $columns));

// $columnRowItems now holds each row item for that column in an array

// this is where my logic breaks
// I need to generate a table row and populate the 4 columns on each row
// instead my code makes a new column for each items in textarea
// and only 4 rows instead of 4 columns and unlimited rows

echo '<tr>';
foreach($columnRowItems as $tkey => $tval){
echo '<td>'.$tval.'</td>';
}
echo '</tr>';
}
echo '</table>';


How can I re-write the PHP to work the way I described.

Each textarea field is a Table column

Each line on the textarea is a new row in that column

Answer

I got it working now with this code....welcome to improvements though!

<?php
if(isset($_POST['table-column'])) {

  $tableColumnsData = $_POST['table-column'];

  $columnCounts = array();
  $tableDataArray = array();

  echo '
  <table border="1">
    <thead>
      <tr>';
  // get count of rows from each column to determine highest number so our 
  // table will have this many rows
  foreach($tableColumnsData as $columnKey => $rows){
      echo "<th>$columnKey</th>";
      $columnRowData = explode("\n", str_replace("\r", "", $rows));
      $columnCounts[] = count($columnRowData);
      $tableDataArray[] = $columnRowData;
  }

  $numberOfTableColumns = count($tableColumnsData);
  $numberOfTableRows = max($columnCounts);


  echo '</tr>
    </thead>
    <tbody>';
  for ($rowCounter = 0; $rowCounter < $numberOfTableRows; $rowCounter++) {
      echo '<tr>';
      for ($columnCounter = 0; $columnCounter < $numberOfTableColumns; $columnCounter++) {
          if(isset($tableDataArray[$columnCounter][$rowCounter]) && $tableDataArray[$columnCounter][$rowCounter] != ''){
              echo '<td>'.$tableDataArray[$columnCounter][$rowCounter].'</td>';
          }else{
              echo '<td></td>';
          }
      }
      echo '</tr>';
  }
  echo '
    </tbody>
  </table>
  ';

}
?>

<form action="" id="tablegenform" method="post">  
<textarea name="table-column[col1]">
  Enter one row on each line for this table column.
</textarea>
<textarea name="table-column[col2]">
  Enter one row on each line for this table column.
  Here's another Line.
</textarea>
<textarea name="table-column[col3]">
  Enter one row on each line for this table column.
</textarea>
<textarea name="table-column[col4]">
  Enter one row on each line for this table column.
  This is a line.
  Here's another row cell.
</textarea>
<textarea name="table-column[col5]">
  Enter one row on each line for this table column.
</textarea>
<input type="submit">
</form>

Results in this output:

  <table border="1">
    <thead>
      <tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>
    </thead>
    <tbody><tr><td>  Enter one row on each line for this table column.</td><td>  Enter one row on each line for this table column.</td><td>  Enter one row on each line for this table column.</td><td>  Enter one row on each line for this table column.</td><td>  Enter one row on each line for this table column.</td></tr><tr><td></td><td>  Here's another Line.</td><td></td><td>  This is a line.</td><td>Again</td></tr><tr><td></td><td></td><td></td><td>  Here's another row cell.</td><td>and again</td></tr><tr><td></td><td></td><td></td><td></td><td>again</td></tr>
    </tbody>
  </table>
  
<form action="" id="tablegenform" method="post">  
<textarea name="table-column[col1]">
  Enter one row on each line for this table column.
</textarea>
<textarea name="table-column[col2]">
  Enter one row on each line for this table column.
  Here's another Line.
</textarea>
<textarea name="table-column[col3]">
  Enter one row on each line for this table column.
</textarea>
<textarea name="table-column[col4]">
  Enter one row on each line for this table column.
  This is a line.
  Here's another row cell.
</textarea>
<textarea name="table-column[col5]">
  Enter one row on each line for this table column.
</textarea>
<input type="submit">
</form>