Question

给定的代码片段有一个javascript函数和一个表格，我想在其中使用模态显示每一行的内容。

但问题是，当我在中间使用警报调试任意数量的行时，当我单击视图按钮时，它始终显示m_id的第一个值，但它必须显示相应的值。 $v对象返回预期数据只是没有问题。

我需要帮助，因为我只是ajax的初学者。

＆＃13;

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

＆＃13;

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();

更新：拼写错误 - 应该是$（el）.closest，而不是$（this）示例小提琴：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

因为你的选择器是文档，它找到第一个带有目标id的元素，所以总是先将第一行元素返回到result.in php代码替换onclick =“view_message（）”with class =“view-btn”并使用我的答案javascript ，

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

从html表行填充数据

3 个答案: