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

时间：2017-01-13 07:58:23

标签： javascript jquery html jquery-ui html-table

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

让我们这样说：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

现在我希望当我点击文件上传控件（如果你看到片段），td里面的值（class =＆＃34; UpdateX＆＃34;），即列C1和＃时39;来自同一行的s值将在警报时显示。 请帮助。

4 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：0)

您可以尝试以下代码：

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

答案 2 :(得分：0)

这应该可以解决问题。

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

答案 3 :(得分：0)

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>
相关问题
最新问题