javascript - 通过单击按钮获取当前行

Question

我一直在尝试从 php 网页上的一行显示中读取特定值。我的想法是我试图获取行中某个单元格的当前值，但是，我尝试使用 getElementsByTagName 不起作用，因为我之后无法访问该值(只有 HTMLCollection 对象)。我正在使用最接近的，但这只能工作并获取开始行。

编辑:

似乎没有弹出任何内容。嗯，模式确实弹出，但没有警报。

尝试过这个demo但也没有用哈哈...

<td><button class='sellButton btn btn-primary' data-target='#modalsell' id='sellStock'>Sell Stock</button></td>

<div id="modalsell" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Sell Stocks</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <div class="input-group">
                            <label for="shares" class="input-group-addon glyphicon glyphicon-user">Amount of Shares:</label>
                            <input type="text" class="form-control" id="sharess" placeholder="Shares Selling...">
                            <label for="start" class="input-group-addon glyphicon glyphicon-user">Minimal Sell Price:</label>
                            <input type="text" class="form-control" id="starts" placeholder="(0 for No Limit)" value="0">

                            <label for="stop" class="input-group-addon glyphicon glyphicon-user">Max Sell Price:</label>
                            <input type="text" class="form-control" id="stops" placeholder="(0 for No Limit)" value="0">
                        </div> <!-- /.input-group -->
                    </div> <!-- /.form-group -->

                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-toggle='modal' onclick="sellStock()">Place Sell</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>
      </div>

调用者中的未定义元素

$(document).ready(function(){
    $(".sellButton").on('click', function (e) {
       alert('test 1');
       $('#modalsell').modal('toggle', $(this));
    });
    $('#modalsell').on('show.bs.modal', function(button){
        alert('test 2');
        var $invoker = $(button.relatedTarget);
        alert($($invoker).id);
    });
});

Answer 1

问题: 您的代码的主要问题是您在循环中使用相同的 id (id='sellStock')。这就是您单击任何按钮时都会得到相同 tr 的原因。

注意: id 属性在页面内应该是唯一的。

解决方案: 尝试使用此代码获取单击按钮的父 tr。

<th><button onclick="myFunction(this)">Sell Stock</button></th>

你的处理函数:

function myFunction(elem) {
    var x = elem.parentElement.parentElement; // x is the parent row 
    //rest of your code goes here
}

替代方案:

您还可以使用 class 选择器代替 id，这是一个更好的选择。

根据评论请求更新:

您可以通过这样做来获取模态的调用者元素。 #your-modal 是您的模态选择器，您可以根据您的要求使用 class 或 id。

$('#your-modal').on('show.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
  //rest of code
});

而不是:

 alert($($invoker).id);

使用这个:

 alert($($invoker).attr('id'));

编码愉快!