javascript - 单击同一表的其他 td 内的某些输入类型时获取表的 td 内容的值

Question

我想在单击同一表的另一个 td 内的某些输入类型时获取表的 td 内容的值。

让我们这样说:

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

现在我希望当我单击 fileup class (文件上传控件)(如果您看到代码片段)时，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();
});