複数のテーブルを持つ特定の列を選択している場合

次のvar stepIDは私の予想どおりではありません。複数のテーブルを持つ特定の列を選択している場合

私のビューには2つのテーブルがあります。どちらのテーブルにも入力は.pClassです。

2番目のテーブルにあり、キーアップイベントが発生した場合、2番目のテーブルではなく1番目のテーブルから入力値が取得されているようです。しかし、キーアップイベントが起こったのと同じテーブルを見る必要があります。最初のイベントではありません。

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

出典

2017-01-26 Stuart Curenton

'$（ 'trが'）、' $（この）.closest（ 'TR'） ' – Barmar

は私が未定義与え'でなければなりません。 [link] https://jsbin.com/yizigawova/edit?js,output –

このリンクは、最初のテーブル入力を取得していることを示しています。強調表示された2番目のテーブルの1つをクリックします。最初のテーブルではなく、2番目のテーブルを表示するには、これが必要です。 3番目のテーブルと同じです。それは最初のテーブル番号をつかむhttps://jsbin.com/gokupigupu/1/edit?js,output –

したいthは、最も近い<table>のcolNames行です。

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

 
});

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; 
 
}

<table class="table table-striped table-hover"> 
 
    <tbody> 
 
    <tr class="titleRow"> 
 
     <td colspan="100%">J11 - Project List, Equipment List, Drawing and Spec Registers, Hold Log - Multidiscipline</td> 
 
    </tr> 
 

 
    <tr class="colNames"> 
 
     <th class="r_id 
 
       " id="r_id" hidden="true"> 
 
     r_id 
 
     </th> 
 
     <th class="WBS 
 
       " id="WBS"> 
 
     WBS 
 
     </th> 
 
     <th class="ActivityCode 
 
       " id="Activity Code"> 
 
     Activity Code 
 
     </th> 
 
     <th class="PTTDescription 
 
       " id="PTT Description"> 
 
     PTT Description 
 
     </th> 
 
     <th class="OriginalBudget 
 
       " id="Original Budget"> 
 
     Original Budget 
 
     </th> 
 
     <th class="PCN 
 
       " id="PCN"> 
 
     PCN 
 
     </th> 
 
     <th class="ControlBudget 
 
       " id="Control Budget"> 
 
     Control Budget 
 
     </th> 
 
     <th class="Design 
 
       chgWidth" id="Design"> 
 
     Design 
 
     <input value="1303" type=""> 
 
     </th> 
 
     <th class="DisciplineCheck 
 
       chgWidth" id="Discipline Check"> 
 
     Discipline Check 
 
     <input value="1304" type=""> 
 
     </th> 
 
     <th class="ClientReview 
 
       chgWidth" id="Client Review"> 
 
     Client Review 
 
     <input value="1305" type=""> 
 
     </th> 
 
     <th class="Issue 
 
       chgWidth" id="Issue"> 
 
     Issue 
 
     <input value="1306" type=""> 
 
     </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td colspan="6"></td> 
 
     <td class="percent">65.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">15.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">15.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">5.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 

 
     <td class="Cell+-1" hidden="true">672168</td> 
 
     <td class="Cell+0">02-Project Controls - -</td> 
 
     <td class="Cell+1">J11</td> 
 
     <td class="Cell+2">desc1</td> 
 
     <td class="Cell+3">23</td> 
 
     <td class="Cell+4">0</td> 
 
     <td class="Cell+5">23</td> 
 
     <td class="percent"> 
 
     <input id="Cell+6" class="input-sm-np pClass" value="21.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
     <input id="Cell+7" class="input-sm-np pClass" value="46.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
     <input id="Cell+8" class="input-sm-np pClass" value="29.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
     <input id="Cell+9" class="input-sm-np pClass" value="2.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 

 
</table> 
 

 

 

 
</div> 
 
<div> 
 

 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 

 
    <table class="table table-striped table-hover"> 
 
    <tbody> 
 
     <tr class="titleRow"> 
 
     <td colspan="100%">J29 - Narrative Design Multidiscipline</td> 
 
     </tr> 
 

 
     <tr class="colNames"> 
 
     <th class="r_id 
 
       " id="r_id" hidden="true"> 
 
      r_id 
 
     </th> 
 
     <th class="WBS 
 
       " id="WBS"> 
 
      WBS 
 
     </th> 
 
     <th class="ActivityCode 
 
       " id="Activity Code"> 
 
      Activity Code 
 
     </th> 
 
     <th class="PTTDescription 
 
       " id="PTT Description"> 
 
      PTT Description 
 
     </th> 
 
     <th class="OriginalBudget 
 
       " id="Original Budget"> 
 
      Original Budget 
 
     </th> 
 
     <th class="PCN 
 
       " id="PCN"> 
 
      PCN 
 
     </th> 
 
     <th class="ControlBudget 
 
       " id="Control Budget"> 
 
      Control Budget 
 
     </th> 
 
     <th class="Design 
 
       chgWidth" id="Design"> 
 
      Design 
 
      <input value="1346" type=""> 
 
     </th> 
 
     <th class="DisciplineCheck 
 
       chgWidth" id="Discipline Check"> 
 
      Discipline Check 
 
      <input value="1347" type=""> 
 
     </th> 
 
     <th class="IDC 
 
       chgWidth" id="IDC"> 
 
      IDC 
 
      <input value="1348" type=""> 
 
     </th> 
 
     <th class="ClientReview 
 
       chgWidth" id="Client Review"> 
 
      Client Review 
 
      <input value="1349" type=""> 
 
     </th> 
 
     <th class="Issue 
 
       chgWidth" id="Issue"> 
 
      Issue 
 
      <input value="1350" type=""> 
 
     </th> 
 
     </tr> 
 

 
     <tr> 
 
     <td colspan="6"></td> 
 
     <td class="percent">60.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">10.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">10.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">15.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">5.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    <tbody> 
 
     <tr> 
 

 
     <td class="Cell+-1" hidden="true">672169</td> 
 
     <td class="Cell+0">03-System Staging - -</td> 
 
     <td class="Cell+1">J29</td> 
 
     <td class="Cell+2">desc2</td> 
 
     <td class="Cell+3">12</td> 
 
     <td class="Cell+4">0</td> 
 
     <td class="Cell+5">12</td> 
 
     <td class="percent"> 
 
      <input id="Cell+6" class="input-sm-np pClass" value="10.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+7" class="input-sm-np pClass" value="20.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+8" class="input-sm-np pClass" value="30.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+9" class="input-sm-np pClass" value="20.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+10" class="input-sm-np pClass" value="20.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     </tr> 
 

 
    </tbody> 
 

 
    </table> 
 
    <div> 
 
    <input class="stepidhere" type="text" /> 
 
    </div> 
 

 

 

 
</div> 
 
<div> 
 

 

 
    <table class="table table-striped table-hover"> 
 
    <tbody> 
 
     <tr class="titleRow"> 
 
     <td colspan="100%">J22 - SOW/Construction Bid Pkg Assembly - Const Bid Package assembly and Scope write-up - SDC</td> 
 
     </tr> 
 

 
     <tr class="colNames"> 
 
     <th class="r_id 
 
       " id="r_id" hidden="true"> 
 
      r_id 
 
     </th> 
 
     <th class="WBS 
 
       " id="WBS"> 
 
      WBS 
 
     </th> 
 
     <th class="ActivityCode 
 
       " id="Activity Code"> 
 
      Activity Code 
 
     </th> 
 
     <th class="PTTDescription 
 
       " id="PTT Description"> 
 
      PTT Description 
 
     </th> 
 
     <th class="OriginalBudget 
 
       " id="Original Budget"> 
 
      Original Budget 
 
     </th> 
 
     <th class="PCN 
 
       " id="PCN"> 
 
      PCN 
 
     </th> 
 
     <th class="ControlBudget 
 
       " id="Control Budget"> 
 
      Control Budget 
 
     </th> 
 
     <th class="DevelopPkg 
 
       chgWidth" id="Develop Pkg"> 
 
      Develop Pkg 
 
      <input value="1337" type=""> 
 
     </th> 
 
     <th class="DisciplineCheck 
 
       chgWidth" id="Discipline Check"> 
 
      Discipline Check 
 
      <input value="1338" type=""> 
 
     </th> 
 
     <th class="ClientReview 
 
       chgWidth" id="Client Review"> 
 
      Client Review 
 
      <input value="1339" type=""> 
 
     </th> 
 
     <th class="Issue 
 
       chgWidth" id="Issue"> 
 
      Issue 
 
      <input value="1340" type=""> 
 
     </th> 
 
     <th class="BidTime 
 
       chgWidth" id="Bid Time"> 
 
      Bid Time 
 
      <input value="1341" type=""> 
 
     </th> 
 
     <th class="BidEvaluation 
 
       chgWidth" id="Bid Evaluation"> 
 
      Bid Evaluation 
 
      <input value="1342" type=""> 
 
     </th> 
 
     <th class="Award 
 
       chgWidth" id="Award"> 
 
      Award 
 
      <input value="1343" type=""> 
 
     </th> 
 
     </tr> 
 

 
     <tr> 
 
     <td colspan="6"></td> 
 
     <td class="percent">60.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">15.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">10.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">5.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">0.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">10.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent">0.00<i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    <tbody> 
 
     <tr> 
 

 
     <td class="Cell+-1" hidden="true">672170</td> 
 
     <td class="Cell+0">03-System Staging - -</td> 
 
     <td class="Cell+1">J22</td> 
 
     <td class="Cell+2">werwererwerwewerwerweerwerere</td> 
 
     <td class="Cell+3">6</td> 
 
     <td class="Cell+4">0</td> 
 
     <td class="Cell+5">6</td> 
 
     <td class="percent"> 
 
      <input id="Cell+6" class="input-sm-np pClass" value="10.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+7" class="input-sm-np pClass" value="10.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+8" class="input-sm-np pClass" value="10.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+9" class="input-sm-np pClass" value="20.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+10" class="input-sm-np pClass" value="30.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+11" class="input-sm-np pClass" value="10.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+12" class="input-sm-np pClass" value="10.00" min="0" max="100" style="background-color: rgb(255, 235, 156);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 

 
     <td class="Cell+-1" hidden="true">672171</td> 
 
     <td class="Cell+0">03-System Staging - -</td> 
 
     <td class="Cell+1">J22</td> 
 
     <td class="Cell+2">just typing this line in to see how long my text fields should be</td> 
 
     <td class="Cell+3">12</td> 
 
     <td class="Cell+4">0</td> 
 
     <td class="Cell+5">12</td> 
 
     <td class="percent"> 
 
      <input id="Cell+6" class="input-sm-np pClass" value="0" min="0" max="100" style="background-color: rgb(255, 255, 255);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+7" class="input-sm-np pClass" value="0" min="0" max="100" style="background-color: rgb(255, 255, 255);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+8" class="input-sm-np pClass" value="0" min="0" max="100" style="background-color: rgb(255, 255, 255);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+9" class="input-sm-np pClass" value="0" min="0" max="100" style="background-color: rgb(255, 255, 255);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+10" class="input-sm-np pClass" value="0" min="0" max="100" style="background-color: rgb(255, 255, 255);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+11" class="input-sm-np pClass" value="0" min="0" max="100" style="background-color: rgb(255, 255, 255);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     <td class="percent"> 
 
      <input id="Cell+12" class="input-sm-np pClass" value="0" min="0" max="100" style="background-color: rgb(255, 255, 255);" type="number"><i class="fa fa-percent" aria-hidden="true"></i> 
 
     </td> 
 
     </tr> 
 

 
    </tbody> 
 

 
    </table>

出典

2017-01-26 23:10:07 Barmar

ありがとうございます。それはうまくいった。 –

複数のテーブルを持つ特定の列を選択している場合

答えて

関連する問題