Get the value of Table's td content when clicked on some input type that is inside other td of the same table
Question
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"> <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" /> </div> </td> <td> <div class="dvhover dvDownload"> <label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label> </div> </td> <td> <div class="dvhover"> <span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span> </div> </td> <td><div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span> </div></td> <td><div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span> </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.
4 answers
solution1
1 ACCPTED 2017-01-13 08:43:48
$(document).on('click', '.fileup', function (event) {
var val = $(this).parents('tr').find('td.UpdateX').text();
alert(val);
event.preventDefault();
});
solution2
0 2017-01-13 08:15:46
You can try the following code:
$(document).on('click', '.fileup', function () {
alert($(this).parents('tr').find('td.UpdateX').text());
});
solution3
0 2017-01-13 08:26:22
This should do the trick.
$(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);
});
solution4
0 2017-01-13 08:47:19
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">
<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" />
</div>
</td>
<td>
<div class="dvhover dvDownload">
<label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label>
</div>
</td>
<td>
<div class="dvhover">
<span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span>
</div>
</td>
<td>
<div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span> </div>
</td>
<td>
<div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span> </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">
<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" />
</div>
</td>
<td>
<div class="dvhover dvDownload">
<label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label>
</div>
</td>
<td>
<div class="dvhover">
<span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span>
</div>
</td>
<td>
<div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span> </div>
</td>
<td>
<div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span> </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">
<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" />
</div>
</td>
<td>
<div class="dvhover dvDownload">
<label class="glyphicon glyphicon-cloud-download" style="cursor: pointer; color:#607bbb;" title="Download File(s)"></label>
</div>
</td>
<td>
<div class="dvhover">
<span class="glyphicon glyphicon-send btnsend" style="cursor: pointer; color:#607bbb;" title="Send"></span>
</div>
</td>
<td>
<div class="dvhover"><span class="glyphicon glyphicon-trash deleteid" data-did="XId" style="cursor: pointer; color:#607bbb;" title="Delete Project"></span> </div>
</td>
<td>
<div class="dvhover"><span class="glyphicon glyphicon-remove btnreject" style="cursor: pointer; color:#607bbb;" title="Cancel Project"></span> </div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to get value when td clicked in table
Get ID of table when clicked on td function
Click a button which is inside td on a table and get other td values
get input values inside a table td
Get Ajax response to table's td input
edit the value in table <td><input></td>
Get td value inside tr from table
How to convert some td from a table into textbox when a button is clicked
Get input inside same <td>
get html table td content
Related Tags