0

私が持っているもの:

<table class="sortable table table-hover table-bordered">
  <thead>
  <tr>
    <th>CPU</th>
    <th>Speed</th>
    <th>Cores</th>
    <th>TDP</th>
    <th>Preformace</th>
    <th>Overclocing</th>
    <th>Price</th>
    <th>Buy</th>
  </tr>
  </thead>
  <tbody>
  <?php $i=0 ;
    do {
    $preformace = $row_Procesory['Preformace'];
    $over = $row_Procesory['Overclocing'];
    $i++; ?>
    <tr>
    <td><?php echo $row_Procesory['CPU']; ?></td>
    <td><?php echo $row_Procesory['Speed']; ?></td>
    <td><?php echo $row_Procesory['Cores']; ?></td>
    <td><?php echo $row_Procesory['TDP']; ?></td>
    <td><?php echo "
    <script type='text/javascript'>
    $(document).ready(function() {
    $('#progressbarP$i').height(10).progressbar({
                                    value : 1
                                    });
    $('#progressbarP$i .ui-progressbar-value').animate(
    {width: '$preformace%'},{queue: false});
    });
    </script>
    <div id='progressbarP$i' title='$preformace'></div>  
    ";?></td>

    <td><?php echo "
    <script type='text/javascript'>
    $(document).ready(function() {
    $('#progressbarO$i').height(10).progressbar({
                                    value : 1
                                    });             
    $('#progressbarO$i .ui-progressbar-value').animate({
        width: '$over%'
        }, 1000);
    });
    </script>
    <div id='progressbarO$i' title='$over'></div>  
    ";?></td>

    <td><?php echo $row_Procesory['Price']; ?></td>
    <!-- BUTTON SECTION -->
   <td><?php echo "<button class='btn btn-success' type='button' align='CENTER'>Add</button>";?></td>
  </tr>
    <?php } while ($row_Procesory = mysql_fetch_assoc($Procesory)); ?>
</tbody>
</table>

基本的に、mysqlをループして行を表示しています。preformace と overclocking の列に、アニメーション化された jquery progresbar と mysql の値が表示されます。テーブルをソート可能にするために、ブートストラップとsortable.jsも使用しています。

どのように見えるか:

私が欲しいもの：追加ボタンをクリックすると、プロセッサの名前が変数としてtest.phpに送信されます。jqueryでname要素をターゲットにする方法さえ知りません:D

4

2 に答える 2

0

クリック イベントをキャプチャし、最も近い「tr」を見つけてから、その「tr」の最初の「td」を見つけます。それは次のようになります。

$(this).closest('tr').find('td:first').text();

または、ボタンのペアレンを取得します。これが td になり、それらが td の親になります。それがTRになります。最後に最初の td を取得します。

$(this).parent().parent().find('td:first').text();

または、ボタンに属性を追加して値を取得するだけです。

$(this).attr('processor');
于 2013-02-15T21:37:12.200 に答える
0

ここであなたの質問を理解できれば、何か役立つことがあります

<table class="sortable table table-hover table-bordered">
  <thead>
  <tr>
    <th>CPU</th>
    <th>Speed</th>
    <th>Cores</th>
    <th>TDP</th>
    <th>Preformace</th>
    <th>Overclocing</th>
    <th>Price</th>
    <th>Buy</th>
  </tr>
  </thead>
  <tbody>
  <?php $i=0 ;
    do {
    $preformace = $row_Procesory['Preformace'];
    $over = $row_Procesory['Overclocing'];
    $i++; ?>
    <tr>
    <td><?php echo $row_Procesory['CPU']; ?></td>
    <td><?php echo $row_Procesory['Speed']; ?></td>
    <td><?php echo $row_Procesory['Cores']; ?></td>
    <td><?php echo $row_Procesory['TDP']; ?></td>
    <td><?php echo "
    <script type='text/javascript'>
    $(document).ready(function() {
    $('#progressbarP$i').height(10).progressbar({
                                    value : 1
                                    });
    $('#progressbarP$i .ui-progressbar-value').animate(
    {width: '$preformace%'},{queue: false});
    });
    </script>
    <div id='progressbarP$i' title='$preformace'></div>  
    ";?></td>

    <td><?php echo "
    <script type='text/javascript'>
    $(document).ready(function() {
    $('#progressbarO$i').height(10).progressbar({
                                    value : 1
                                    });             
    $('#progressbarO$i .ui-progressbar-value').animate({
        width: '$over%'
        }, 1000);
    });
    </script>
    <div id='progressbarO$i' title='$over'></div>  
    ";?></td>

    <td><?php echo $row_Procesory['Price']; ?></td>
    <!-- BUTTON SECTION -->
   <td><?php echo "<button class='btn btn-success pro_btn' processor = '".$row_Procesory['CPU']."'  type='button' align='CENTER'>Add</button>";?></td>
  </tr>
    <?php } while ($row_Procesory = mysql_fetch_assoc($Procesory)); ?>
</tbody>
</table>

その解決策（プロセッサ属性）は、必要に応じて提供できるセレクターを避けることです

$('.pro_btn').die('click').live('click',function(e){
     var name = $(this).attr('processor');
     $.post('test.php',{'processor_name':name}, function(response) {
    // log the response to the console
         console.log("Response: "+response);
     });

});

属性を使用したくない場合は、次のようにすることができます 

var name = $(this).closest('tr').find('td:first').text();

これが役立つことを願っています:)

于 2013-02-15T21:24:01.250 に答える