Question

我有一个html表，我希望用户能够点击表格的一行并弹出一个具有特定列值的警报。我已经能够通过返回所选行中的第一列值来获取警报，但无法弄清楚如何获取任何其他列信息。

到目前为止，我的javascript代码看起来像这样：

$("#pass_table tr").click(function(){
  $(this).addClass('selected').siblings().removeClass('selected');    
    });

$('.ok').on('click', function(e){
  if($("#pass_table tr.selected td:first").html()){
    var retval = confirm("Continue using: "+$("#pass_table tr.selected td:first").html()+"?");
    if(retval == true){
      alert("it worked!")
    } else {
      alert("you canceled!!")
    }
  } else {
    alert("You must select a row.")
  }
});

我的html代码如下所示：

<div class="table-responsive">
  {{ pass_table | safe }}
</div>
<form class="form-horizontal">
  <div class="text-center">
    <input type="button" class="btn btn-primary ok" value="Generate File"/>
  </div>
</form>

其中使用pass_table从通用pandas数据框（df）生成DataFrame.to_html()，如下所示：

html_table = re.sub(' pass_table', '" id="pass_table', df.to_html(classes='pass_table'))

如何显示表格中所选行第13列的信息？

Answer 1

目前您正在使用:nth-child() css选择器，它只提供第一列。您将需要使用$("#pass_table tr.selected td:nth-child(13)").html()选择器。

libmaxminddb.so.0

见这里：https://api.jquery.com/nth-child-selector/

Answer 2

您可以通过jQuery events target-property 访问点击的元素，或者更轻松$(this)

有关您通常可以获得的点击元素的任何信息

$(document).on('click', '.pass_table td', function(event){
      //zero-based colNo and rowNo
       var $col = $(this); // or $(event.target)
       var $row = $col.parents('tr:first').addClass('selected').siblings().removeClass('selected');
       var content = $col.text();
       var colNo = $col.prevAll().size();
       var rowNo = $row.prevAll().size();
       alert('content: ' + content + '; rowNo: ' + rowNo + ';colNo' + colNo);
    });

这是一个带展示的fiddle

使用jQuery在行单击时返回表列值

2 个答案: