htmlテーブルの行からデータを取り込む

Question

このスニペットにはjavascript関数と、各行の内容をモーダルで表示するテーブルがあります。

しかし、ビューボタンをクリックすると常に最初の値m_idが表示されますが、対応する値が表示される必要があります。 $vオブジェクトは期待されるデータを返すだけで問題はありません。

私はちょうどajaxの初心者ですから助けが必要です。

<script type="text/javascript"> 
 
    function view_message(){ 
 
    //alert("aa gyaksjhfjxvhk"); 
 
    var m_id = document.getElementById('m_id').value; 
 
    var c_name = document.getElementById('c_name').value; 
 
    var message = document.getElementById('message').value; 
 

 
    
 
    alert(m_id); 
 
    //alert(loc); 
 

 
    $.ajax({ 
 
     type: "POST", 
 
     url: "view_message.php", 
 
     data: 
 
     { 'm_id' :m_id, 
 
     'c_name' : c_name, 
 
     'message' : message 
 
     }, 
 
     success: function(data){ 
 
     // alert("success"); 
 
     
 
     $(".message_container").html(data); 
 

 
     } 
 
    }); 
 
    
 
    } 
 

 
</script> 
 

 
foreach($v_message as $v) 
 
       {   
 
       echo '<tr>'; 
 
        echo '<td>'.$v->time.'</td>'; 
 
        echo '<td>'.$v->c_name.'</td>'; 
 

 
        echo '<input id="m_id" name="m_id" value="'.$v->id.'" hidden />'; 
 
        echo '<input id="c_name" name="c_name" value="'.$v->c_name.'" hidden />'; 
 
        echo '<input id="message" name="message" value="'.$v->message.'" hidden />'; 
 
        
 
        echo '<td data-toggle="modal" data-target="#myModal">'; 
 
        
 
       
 
        echo ' <input type="button" id="view" onclick="view_message()" value="view"></input>'; 
 
       echo '</td>'; 
 
       
 
        echo '<td data-toggle="modal" data-target="#myModal1"> 
 
        
 
       <a href="#"><span>Delete</span></a>'; 
 
        
 
        echo '</td>'; 
 

 
        echo '</tr>'; ?> 
 

 
        <div id="message_container"> 
 
        </div>

Answer 1

IDは、文書内で一意でなければなりません。参照：stackoverflow.com/a/9454716/2181514

あなたのforループは同じIDを持つ複数のアイテムを生成するので、$(#idを実行すると最初のものが得られます。

あなたはクラスを使用して、現在の行への参照を渡すことによってこの問題を解決することができます

変更

onclick="view_message()" 
<input id="m_id" name="m_id" 

へ

onclick="view_message(this)" 
<input class='m_id' id="m_id" name="m_id" 

その後：

function view_message(el){ 
    var row = $(el).closest("tr"); 
    var m_id = $(".m_id", row).val(); 

---

アップデート：タイプミス - されている必要があります$（エル）.closest、ない$（この） 例フィドル：https://jsfiddle.net/37tkgsnm/

HTML：

<tr> 
    <td><input class='m_id' value='123' /></td> 
    <td><button type="button" onclick="view_message(this);">click</button></td> 
</tr> 

JS：

function view_message(el) { 
    var row = $(el).closest("tr"); 
    alert($(".m_id", row).val()) 
} 

Answer 2

変更あなたのセレクター$(.message_container)〜$(#message_container) 変更されたコードは以下の通りです。

<script type="text/javascript"> 
function view_message(){ 
//alert("aa gyaksjhfjxvhk"); 
var m_id = document.getElementById('m_id').value; 
var c_name = document.getElementById('c_name').value; 
var message = document.getElementById('message').value; 


alert(m_id); 
//alert(loc); 

$.ajax({ 
    type: "POST", 
    url: "view_message.php", 
    data: 
    { 'm_id' :m_id, 
    'c_name' : c_name, 
    'message' : message 
    }, 
    success: function(data){ 
    // alert("success"); 

    $("#message_container").html(data); 

    } 
    }); 

} 

</script> 

Answer 3

あなたのセレクタがドキュメントであるため、そのresult.in PHPコードでそう常に最初の行要素戻り、ターゲットIDを持つ最初の要素を見つけることは、クラス=「ビュー-BTN」で=「view_message（）」onclickの交換および

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    var view_message = function(){ 
 

 
    var row = $(this).closest('tr'); 
 
    var m_id = $(row).find('#m_id').val(); 
 
    var c_name = $(row).find('#c_name').val(); 
 
    var message = $(row).find('#message').val();  
 
    alert(m_id);  
 
    } 
 
    $(".view-btn").on('click', view_message); 
 
}); 
 
</script> 
 

 
foreach($v_message as $v) 
 
       {   
 
       echo '<tr>'; 
 
        echo '<td>'.$v->time.'</td>'; 
 
        echo '<td>'.$v->c_name.'</td>'; 
 

 
        echo '<input id="m_id" name="m_id" value="'.$v->id.'" hidden />'; 
 
        echo '<input id="c_name" name="c_name" value="'.$v->c_name.'" hidden />'; 
 
        echo '<input id="message" name="message" value="'.$v->message.'" hidden />'; 
 
        
 
        echo '<td data-toggle="modal" data-target="#myModal">'; 
 
        
 
       
 
        echo ' <input type="button" id="view" class="view-btn" value="view"></input>'; 
 
       echo '</td>'; 
 
       
 
        echo '<td data-toggle="modal" data-target="#myModal1"> 
 
        
 
       <a href="#"><span>Delete</span></a>'; 
 
        
 
        echo '</td>'; 
 

 
        echo '</tr>'; ?> 
 

 
        <div id="message_container"> 
 
        </div>