Get the value of the td table content when it is clicked on an input type that is in the other td of the same table

advertisements

I want to get the value of Table's td content when clicked on some input type that is inside another td of the same table.

Let's say like this:

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

Now I want that when i click on fileup class , which is file upload control (if you see the snippet), the value inside the td (class="UpdateX"), ie, column C1's value from same row, will show on alert. Kindly Help.


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