请查看此小提琴https://jsfiddle.net/shaswatatripathy/y7jqb5hp/7/
function getdetails(row) {
$("#tableID tbody tr").each(function() {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
function DetailsOfTheSelectedRows() {
$.each($("#tableID tbody tr.highlightRowSelected"), function() {
$('#txtBoxValue').value = $(this).find('td:eq(1)').text();
});
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.highlightRowSelected {
background-color: #e2e2e2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
<tr onclick="getdetails(this)">
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</table>
<input type="button" onclick="DetailsOfTheSelectedRows()" value="Selected Row" />
<input type="text" id="txtBoxValue" />
在实际项目中,整个tbody都是动态的,所以不要更改html和 getdetails(row)
函数
表行可以动态地添加多个类。
我的工作是仅获取包含highlightRowSelected
附加的该行,获取第一列值并在文本框中显示
jQuery函数DetailsOfTheSelectedRows
也必须是动态的,因此选择器应该在那里,只有一行将附加该类名称。
那么如何写DetailsOfTheSelectedRows
:
我更改了您的代码为
function DetailsOfTheSelectedRows()
{
$.each($(".highlightRowSelected",'#tableID'), function () {
$('#txtBoxValue').val($(this).find('td:eq(1)').text());
});
}
更新了小提琴https://jsfiddle.net/y7jqb5hp/9/
检查
单线内部的详细信息theSelectedRows((函数...
function DetailsOfTheSelectedRows() {
$('#txtBoxValue').val($('#tableID tr.highlightRowSelected td:eq(1)').text())
}
这是您的小提琴,更新:https://jsfiddle.net/9cuoe5df/