使用总计显示/隐藏动态表列

Question

Good afternoon, in my php/mysql page I have dynamic tables with a row total for each row. I have used a show/hide script to hide certain columns which is great but I would really like the row total to update when column is hidden, iin example below if I hide say Jan it should deduct the value in that column row and update the total column?

Here is the js;

<script type="text/javascript" src="../js/prototype.js"></script>

<script language="javascript">
function toggleVis(button) { 
  // Toggle column 
  cells = $$('.t'+button.name); 
  cells.invoke(button.checked ? 'show' : 'hide'); 

  // Recaulculate total 
  $$('tr.row').each(function(row) { 
    // Initialise to zero 
    var total = 0; 
    row.down('.total').textContent = total; 

    // Sum all visible cells 
    row.select('td').each(function(cell) { 
      total += cell.visible() ? parseInt(cell.textContent, 10) : 0;
    }); 

    // Write the total in the total cell 
    row.down('.total').textContent = total; 
  }); 
}
</script>

And dynamic table + form to hide columns;

<form name="tcol" onsubmit="return false">
  Show columns
  <input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1
  <input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2
  <input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3
</form>

<table border="1" cellpadding="1" cellspacing="1">
  <tr>
    <td class="tcol1">Adviser</td>
    <td class="tcol2">Jan</td>
    <td class="tcol3">Feb</td>
    <td class="total">Total</td>
  </tr>
  <?php do { ?>
    <tr class="row">
      <td class="tcol1"><?php echo $row_Recordset1['Adviser']; ?></td>
      <td class="tcol2"><?php echo $row_Recordset1['Jan'    ]; ?></td>
      <td class="tcol3"><?php echo $row_Recordset1['Feb'    ]; ?></td>
      <td class="total"><?php echo $row_Recordset1['Total'  ]; ?></td>
    </tr>
    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>

Many thanks for looking..

Answer 1

Then you have to parse your table using Javascript, just after toggling the column.

The easiest way would be to give a class to each rows and each cell. Take care not to use ids for you cells as they won't be unique. Don't use names either, as they are more dedicated to forms and inputs.

<tr class="row">
  <td class="tcol1"><?php echo $row_Recordset1['Adviser']; ?></td>
  <td class="tcol2"><?php echo $row_Recordset1['Jan'    ]; ?></td>
  <td class="tcol3"><?php echo $row_Recordset1['Feb'    ]; ?></td>
  <td class="total"><?php echo $row_Recordset1['Total'  ]; ?></td>
</tr>

Then you would parse your rows and cells like the following (prototype.js style) :

$$('tr.row').each(function(row) {
  // Initialise to zero
  var total = 0;
  row.down('.total').textContent = total;

  // Sum all visible cells
  row.select('td').each(function(cell) {
     total += cell.visible() ? parseInt(cell.textContent) : 0;
  });

  // Write the total in the total cell
  row.down('.total').textContent = total;
});

That should work.

You could have a analog code written with other JS frameworks, like jquery, needless to say that without any framework it would be quite less trivial.