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

时间:2012-07-25 13:49:42

标签: php javascript

下午好,在我的php / mysql页面中,我有动态表,每行有一行。我使用了一个显示/隐藏脚本来隐藏某些很棒的列,但我真的希望在隐藏列时更新行总数,如果我隐藏的话,请在下面举例说Jan它应该扣除该列行中的值并更新总栏?

这是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>

动态表+表单隐藏列;

<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>

非常感谢您的光临..

2 个答案:

答案 0 :(得分:1)

然后你必须在切换列之后使用Javascript解析你的表。

最简单的方法是为每行和每个单元格提供一个类。注意不要为你的细胞使用id,因为它们不是唯一的。不要使用名称,因为它们更专注于表单和输入。

<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>

然后你会解析你的行和单元格,如下所示(样式):

$$('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;
});

这应该有效。

你可以用其他JS框架编写一个模拟代码,比如,不用说没有任何框架就不会那么简单了。

答案 1 :(得分:0)

你试试这个..

classname用于隐藏/显示功能

$('.total').hide();
$('.total').show();

$('.total').toggle();

我已经检查过了......

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function show()
{

$('.total').toggle();


}
</script>
<table>
<tr class="row">
  <td class="tcol1">New</td>
  <td class="tcol2">Jan</td>
  <td class="tcol3">Feb</td>
  <td class="total">Total</td>
</tr>
</table>
<input type='button' value='new' id='new' onclick='show()'>