使用jQuery返回表格列值

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是使用DataFrame.to_html()從通用熊貓數據幀（ df ）生成的，如下所示：

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

我將如何顯示表格中所選行的第13列中的信息？

Answer 1

當前，您正在使用:first css選擇器，該選擇器僅提供第一列。 您將要使用:nth-child()選擇器。

$("#pass_table tr.selected td:nth-child(13)").html()

看到這里： https : //api.jquery.com/nth-child-selector/

Answer 2

您可以通過jQuery事件target-property或更簡單的$(this) 訪問clicked元素。

您可以像往常一樣獲得有關單擊元素的任何信息

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

這是擺設的擺弄