Ajax。リストからのみクリックして最初の行の値を取得する

Question

こんにちは私のHTMLリストは、Ajaxスクリプトにリンクされたボタンが最初の行に表示されます。 PHPページ

<?php 
$sql="SELECT * FROM scanns WHERE `site` = '$csite' AND `date` BETWEEN '$sdate' AND '$edate' "; 
$result_set=mysqli_query($link,$sql); 
while($row=mysqli_fetch_array($result_set)) 
{ 
?> 
    <tr> 
    <td><?php echo $row['date']; ?></td> 
    <td><?php echo $row['site']; ?></td> 
    <td><?php echo $row['file_name']; ?></td> 
    <td><a href="scann/<?php echo $row['site']?>/<?php echo $row['file_name'] ?>" target="_blank">view scann</a></td> 
    <td> 
     <input class='date' type='hidden' value= "<?php echo $row['date']; ?>"/> 
     <input class='site' type='hidden' value= "<?php echo $row['site']; ?>"/> 
     <input class='filename' type='hidden' value= "<?php echo $row['file_name']; ?>"/> 
     <input class="submit" type="button" value="Delete Scan"> 
    </td> 
    <td> 
     <input class="stamp" type="button" value="Post File"> 
    </td> 
    </tr> 
<?php 
} 
?> 
     </table> 

Ajax呼び出し

$(document).ready(function(){ 
    "use strict"; 
    $('.submit').click(function(){ 
     var date = $('.date').val(); 
     var site = $('.site').val(); 
     var filename = $('.filename').val(); 
     var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename; 

     // AJAX Code To Submit Form. 
     $.ajax({ 
      type: "POST", 
      url: "cscanndelete.php", 
      data: dataString, 
      cache: false, 
      success: function(result){ 
       alert(result); 
      } 
     }); 
     return false; 
    }); 
    $('.stamp').click(function(){ 
     var date = $('.date').val(); 
     var site = $('.site').val(); 
     var filename = $('.filename').val(); 
     var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename; 

     // AJAX Code To Submit Form. 
     $.ajax({ 
      type: "POST", 
      url: "scanstamp.php", 
      data: dataString, 
      cache: false, 
      success: function(result){ 
       alert(result); 
      } 
     }); 

     return false; 
    }); 
}); 

あなたはそれが唯一の解決方法がわからあるいは私ができるそうでない場合は、最初の行の値をピックアップボタンのいずれかをクリックすると。

$('.date').val()

Answer 1

第整合素子の値を返します。ページには一致する要素が多数あるため、最初のテーブル行が常に返されます。

あなたは$('.submit')セレクタのコンテキストにあるので、これを出発点として使用してDOMを走査し、必要な特定の要素を見つけることができます。このような何か：（送信ボタン）thisで開始する必要があります

var date = $(this).closest('tr').find('.date').val(); 

は、（あなたがこのケースで探しているすべての要素を持っている）を含むtrまで調べて、その後のマッチングを見つけますその文脈の中でただ一つの要素だけである。その親の中にただ一つの.date要素がある限り、trは、その一つの要素からの値を返します。

それについて移動するには、いくつかの方法は、それがする必要があるかもしれどのよう堅牢に応じてありますが、あなたのケースでは、あなたはまた、.prev('.date')のようなものを利用することができる、またはのみtdの代わりtrまでトラバースなどマークアップが少し変更された場合

Answer 2

$('.date').val() 

は常に最初に一致する要素の値を返します。クリックした要素の値を取得する場合は、次のようにします。

$('submit').click(function(){ 
    $(this).closest('input').find('.date').val(); 
    $(this).closest('input').find('.site').val(); 

...}）;私たちが読むことをして**デバッグ**独自のコードをお届けしますため