Jquery选择具有多个表的某个列

Question

以下var stepID并不适用于我的预期。

我的观点中有两个单独的表格。两个表中都有一些带有.pClass的输入。

如果我在第二个表中并且发生了键上事件，它似乎是从第一个表而不是第二个表获取输入值。但我需要它来查看keyup事件发生的同一个表，而不是第一个。

$(document).on('keyup', '.pClass', function () {
  var detailRowID = $(this).closest('tr').children('td:first').html();
  var stepID = $('tr').children('th')
                      .eq($(this).closest('td').index())
                      .children('input').val();
  var percent = $(this).val(); 
});

Answer 1

您想要的th位于距离最近colNames的{​​{1}}行。

＆＃13;

＆＃13;

<table>

＆＃13;

 $(document).on('click', '.pClass', function() {
   var detailRowID = $(this).closest('tr').children('td:first').html();
   var stepID = $(this).closest('table').find('tr.colNames').children('th').eq($(this).closest('td').index()).children('input').val();

   alert(stepID);

 });

＆＃13;

body {
  /*background-color:darkgrey;*/
}
table {
  font-family: 'Tahoma';
  font-size: 70%;
  width: unset!important;
}
table th.shrink {
  white-space: nowrap;
}
table th.wrap {
  word-wrap: initial;
}
table td.shrink {
  white-space: nowrap;
}
table td.expand {
  width: 99%;
}
tr.titleRow td {
  background-color: #3e3f3a!important;
  color: white;
  text-indent: 10px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
td,
th {
  border: 1px solid #3e3f3a;
  vertical-align: middle!important;
  padding: 1px 4px 1px 4px !important;
}
th {
  font-size: 95%;
  /*background-color:transparent!important;*/
  background-color: #93C54B!important;
}
td {
  padding: 2px 8px 2px 8px!important;
}
.colNames:hover {
  cursor: default!important;
  pointer-events: none;
  background-color: transparent!important;
}
.WBS {
  width: 150px!important;
}
.ActivityCode {
  width: 10px!important;
  text-align: center;
}
.ActivityName {
  width: 100px!important;
}
.PTTDescription {
  width: 200px!important;
}
.OriginalBudget {
  width: 50px!important;
  text-align: center;
}
.PCN {
  width: 25px!important;
  text-align: center;
}
.ControlBudget {
  width: 50px!important;
  text-align: center;
}
[class$="chgWidth"] {
  background-color: #CCC!important;
  width: 75px!important;
  text-align: center;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  color: black;
  font-size: xx-small!important;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.input-sm-np {
  height: 30px;
  padding: 5px 10px;
  font-size: 100%;
  line-height: 1.5;
  border-radius: 3px;
  /*padding:0px,0px,0px,0px!important;*/
  width: 45px;
  /*background: url(/images/percent.png) no-repeat scroll 1% 1%;*/
  /*padding-left: 30px;*/
  text-align: right;
}
.percent {
  text-align: center;
}
[class="Cell+1"],
[class="Cell+3"],
[class="Cell+4"],
[class="Cell+5"] {
  text-align: center;
}

＆＃13;

＆＃13;

＆＃13;