同じテーブルの他のtd内にある入力タイプをクリックすると、テーブルのtdコンテンツの値を取得

Question

同じテーブルの別のtd内にある入力タイプをクリックすると、テーブルのtdコンテンツの値を取得したい。

さんは次のように言ってみましょう：内部の値、今私は（あなたがスニペットを見れば）私は、ファイルアップロードコントロールであるFileUpはクラス、上でクリックしたときにすることを望ん

<table width="100%" border="1"> 
 
     <thead> 
 
      <tr> 
 
       <th></th> 
 
       <th>C1</th> 
 
       <th><i class="font-xs"></i> C2</th> 
 
       <th><i class="font-xs"></i> C3</th> 
 
       <th><i class="text-muted hidden-md hidden-sm hidden-xs"></i> C4</th> 
 
       <th><i class="text-muted hidden-md hidden-sm hidden-xs"></i> C5</th> 
 
       <th><i class="text-muted hidden-md hidden-sm hidden-xs"></i>C6</th> 
 
       <th>C7</th> 
 
       <th>C8</th> 
 

 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      
 
      <tr> 
 
       <td class="clstest" id="X1" style="cursor: pointer; cursor: hand;"><span class="glyphicon glyphicon-plus-sign pl"></span></td> 
 
       <td class="editpro UpdateX" data-projname="Xname" data-toggle="modal" data-target="#myXName" data-backdrop="static" data-keyboard="false" data-id="XId" style="cursor: pointer; cursor: hand;"><span class="EditXName">X1Name</span></td> 
 
       <td>X2Source</td> 
 
       <td> 
 
        X31,X32,X33 
 

 

 
       </td> 
 
       <td>11-01-2017</td> 
 
       <td>15--2-2017</td> 
 
       <td>True</td> 
 
       <td> 
 
        X41 
 
       </td> 
 
       <td data-projid="XId" class="fid"> 
 
        <div class="row"> 
 
         <table> 
 
          <tr> 
 
           <td> 
 
            <div class="image-upload dvhover"> 
 
             &nbsp;&nbsp;<label for="file-input" class="glyphicon glyphicon-cloud-upload" style="cursor: pointer; color:#607bbb;" title="Upload File"></label> 
 
             <input id="file-input" class="fileup" type="file" accept=".resx, .zip, .rar" />&nbsp; 
 
            </div> 
 
           </td> 
 

 
           
 
           <td> 
 
            <div class="dvhover dvDownload"> 
 
             <label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label>&nbsp; 
 
            </div> 
 
           </td> 
 
           
 
           <td> 
 
            <div class="dvhover"> 
 
             <span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span>&nbsp; 
 
            </div> 
 
           </td> 
 
           
 
           <td><div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span>&nbsp;</div></td> 
 
           <td><div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span>&nbsp;</div></td> 
 
           
 

 
          </tr> 
 
         </table> 
 
        </div> 
 
       </td> 
 

 
      </tr> 
 
      
 
     </tbody> 
 
    </table>

td（class = "UpdateX"）、つまり同じ行のC1列の値がアラートに表示されます。 親切にお手伝いください。

Answer 1

$(document).on('click', '.fileup', function (event) { 
    var val = $(this).parents('tr').find('td.UpdateX').text(); 
    alert(val); 
    event.preventDefault(); 
}); 

Answer 2

は、次のコードを試すことができます：

$(document).on('click', '.fileup', function() { 
    alert($(this).parents('tr').find('td.UpdateX').text()); 
}); 

Answer 3

これはトリックを行う必要があります。

$(document).on('click', '.fileup', function() 
{ 
    var parent = $(this).parents('td.fid'); 
    var grandParent = $(parent).parents('tr'); 

    var value = $(grandParent).find('td.UpdateX .EditXName').text(); 

    alert(value); 
}); 

Answer 4

DEMO Click

javascriptの

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $('.fileup').on('click', function(){ 

    var Result = $(this).parents('tr').closest('tr').find('td.UpdateX').text(); 

    alert(Result); 

    }); 
}); 
</script> 

HTML

<table width="100%" border="1"> 
<thead> 
    <tr> 
     <th></th> 
     <th>C1</th> 
     <th><i class="font-xs"></i> C2</th> 
     <th><i class="font-xs"></i> C3</th> 
     <th><i class="text-muted hidden-md hidden-sm hidden-xs"></i> C4</th> 
     <th><i class="text-muted hidden-md hidden-sm hidden-xs"></i> C5</th> 
     <th><i class="text-muted hidden-md hidden-sm hidden-xs"></i>C6</th> 
     <th>C7</th> 
     <th>C8</th> 
    </tr> 
</thead> 
<tbody> 

    <tr> 
     <td class="clstest" id="X1" style="cursor: pointer; cursor: hand;"><span class="glyphicon glyphicon-plus-sign pl"></span></td> 
     <td class="editpro UpdateX" data-projname="Xname" data-toggle="modal" data-target="#myXName" data-backdrop="static" data-keyboard="false" data-id="XId" style="cursor: pointer; cursor: hand;"><span class="EditXName">X1Name</span></td> 
     <td>X2Source</td> 
     <td>X31,X32,X33</td> 
     <td>11-01-2017</td> 
     <td>15--2-2017</td> 
     <td>True</td> 
     <td>X41</td> 
     <td data-projid="XId" class="fid"> 
     <div class="row"> 
     <table> 
      <tr> 
       <td> 
        <div class="image-upload dvhover"> 
         &nbsp;&nbsp;<label for="file-input" class="glyphicon glyphicon-cloud-upload" style="cursor: pointer; color:#607bbb;" title="Upload File"></label> 
         <input id="file-input" class="fileup" type="file" accept=".resx, .zip, .rar" />&nbsp; 
        </div> 
       </td>      
       <td> 
        <div class="dvhover dvDownload"> 
         <label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label>&nbsp; 
        </div> 
       </td> 
       <td> 
        <div class="dvhover"> 
         <span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span>&nbsp; 
        </div> 
       </td>      
       <td> 
        <div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span>&nbsp;</div> 
       </td> 
       <td> 
       <div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span>&nbsp;</div> 
       </td> 
      </tr> 
     </table> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td class="clstest" id="X1" style="cursor: pointer; cursor: hand;"><span class="glyphicon glyphicon-plus-sign pl"></span></td> 
     <td class="editpro UpdateX" data-projname="Xname" data-toggle="modal" data-target="#myXName" data-backdrop="static" data-keyboard="false" data-id="XId" style="cursor: pointer; cursor: hand;"><span class="EditXName">2X1Name</span></td> 
     <td>2X2Source</td> 
     <td>2X31,X32,X33</td> 
     <td>11-01-2016</td> 
     <td>15--2-2016</td> 
     <td>True</td> 
     <td>2X41</td> 
     <td data-projid="XId" class="fid"> 
     <div class="row"> 
     <table> 
      <tr> 
       <td> 
        <div class="image-upload dvhover"> 
         &nbsp;&nbsp;<label for="file-input" class="glyphicon glyphicon-cloud-upload" style="cursor: pointer; color:#607bbb;" title="Upload File"></label> 
         <input id="file-input" class="fileup" type="file" accept=".resx, .zip, .rar" />&nbsp; 
        </div> 
       </td>      
       <td> 
        <div class="dvhover dvDownload"> 
         <label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label>&nbsp; 
        </div> 
       </td> 
       <td> 
        <div class="dvhover"> 
         <span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span>&nbsp; 
        </div> 
       </td>      
       <td> 
        <div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span>&nbsp;</div> 
       </td> 
       <td> 
       <div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span>&nbsp;</div> 
       </td> 
      </tr> 
     </table> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td class="clstest" id="X1" style="cursor: pointer; cursor: hand;"><span class="glyphicon glyphicon-plus-sign pl"></span></td> 
     <td class="editpro UpdateX" data-projname="Xname" data-toggle="modal" data-target="#myXName" data-backdrop="static" data-keyboard="false" data-id="XId" style="cursor: pointer; cursor: hand;"><span class="EditXName">3X1Name</span></td> 
     <td>3X2Source</td> 
     <td>3X31,X32,X33</td> 
     <td>11-01-2015</td> 
     <td>15--2-2015</td> 
     <td>True</td> 
     <td>3X41</td> 
     <td data-projid="XId" class="fid"> 
     <div class="row"> 
     <table> 
      <tr> 
       <td> 
        <div class="image-upload dvhover"> 
         &nbsp;&nbsp;<label for="file-input" class="glyphicon glyphicon-cloud-upload" style="cursor: pointer; color:#607bbb;" title="Upload File"></label> 
         <input id="file-input" class="fileup" type="file" accept=".resx, .zip, .rar" />&nbsp; 
        </div> 
       </td>      
       <td> 
        <div class="dvhover dvDownload"> 
         <label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label>&nbsp; 
        </div> 
       </td> 
       <td> 
        <div class="dvhover"> 
         <span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span>&nbsp; 
        </div> 
       </td>      
       <td> 
        <div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span>&nbsp;</div> 
       </td> 
       <td> 
       <div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span>&nbsp;</div> 
       </td> 
      </tr> 
     </table> 
     </div> 
     </td> 
    </tr> 

</tbody> 
</table>