问从html表格行填充数据
EN

Stack Overflow用户

提问于 2016-07-30 07:43:14

回答 3查看 200关注 0票数 0

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

但问题是，当我在中间使用alert对任意数量的行进行调试时，当我单击视图按钮时，它总是显示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>

codeigniter

javascript

jquery

ajax

回答 3

Stack Overflow用户

发布于 2016-07-30 07:52:22

in在文档中必须是唯一的。参见: 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())
}

票数 0

Stack Overflow用户

发布于 2016-07-30 09:12:58

将选择器$(.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>

票数 0

Stack Overflow用户

发布于 2016-07-30 10:00:35

因为选择器是document，所以它查找第一个具有目标id元素，因此总是在result.in php代码中返回的第一个row元素将onclick="view_message()“替换为class=”class=-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>