【问题标题】：Get the value of Table's td content when clicked on some input type that is inside other td of the same table单击同一表的其他 td 内的某些输入类型时获取表的 td 内容的值
【发布时间】：2017-01-13 17:10:08
【问题描述】：
当单击同一个表的另一个 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">
<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>
现在我希望当我单击 fileup 类时，它是文件上传控件（如果您看到 sn-p），td 内的值（class="UpdateX"），即同一行中 C1 列的值, 将在警报中显示。
请帮忙。
【问题讨论】：
标签：
javascript
jquery
html
jquery-ui
html-table
【解决方案1】：
$(document).on('click', '.fileup', function (event) {
var val = $(this).parents('tr').find('td.UpdateX').text();
alert(val);
event.preventDefault();
});
【解决方案2】：
你可以试试下面的代码：
$(document).on('click', '.fileup', function () {
alert($(this).parents('tr').find('td.UpdateX').text());
});
【解决方案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);
});
【解决方案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">
<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>