1

こんにちは、私の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>

見てくれてありがとう。

4

2 に答える 2

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 フレームワークを使用してアナログ コードを作成することもできますが、言うまでもなく、フレームワークがなければそれほど簡単ではありません。

于 2012-07-25T14:07:47.443 に答える
0

これを試してみてください..

クラス名は非表示/表示機能に使用されます

$('.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()'>
于 2012-07-27T13:18:46.933 に答える