Javascript 在切换开关上更改行中单元格的值
我想更改切换开关所在行中切换开关上单元格的文本 表格Javascript 在切换开关上更改行中单元格的值,javascript,jquery,Javascript,Jquery,我想更改切换开关所在行中切换开关上单元格的文本 表格 <table class="table" id="visitor_table"> <thead> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> <
<table class="table" id="visitor_table">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td class="item_id">
@Html.DisplayFor(modelItem => item.VisitorId)
</td>
<td class="item_firstname">
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td class="item_lastname">
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td class="item_requeststatus">
@Html.DisplayFor(modelItem => item.RequestStatus)
</td>
<td id="item_checkbox">
@if (item.RequestStatus != "Pending")
{
<input id=@item.VisitorId onclick="toggleclick(@item.VisitorId)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
<label for=@item.VisitorId></label>
}
else
{
<input id=@item.VisitorId onclick="toggleclick(@item.VisitorId)" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
<label for=@item.VisitorId></label>
}
</td>
</tr>
}
</tbody>
</table>
我上面的代码仍然远没有达到我想要达到的效果。我在这里和其他网站上搜索过,没有一个适合我。下面是我的无力尝试。
尝试
function toggleClick()
{
if cell[4] is checked{
set cell[3] to "Approved"
} else {
set cell[3] to "Pending"
}
}
function toggleclick(x) {
var table = document.getElementById("visitor_table");
var row = $(table).closest('tr');
var x = row.find("td:eq(0)").html();
alert(x);
}
我真的需要你的帮助。谢谢。您需要传递当前元素
切换单击功能
<input id=@item.VisitorId onclick="toggleclick(this, @item.VisitorId)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
经核准的
经核准的
经核准的
此方法将执行您需要的操作:
function toggleClick(event) {
var
inputElement = event.target,
// This only works as long as the input is a direct child of the row.
cellElement = inputElement.parentElement,
// This will return the td before the td with the input.
previousCell = cellElement.previousSibling;
previousCell.textContent = (inputElement.checked)
? 'Approved'
: 'Pending';
}
它不是很灵活,它希望输入元素是td元素的直接子元素,如果您在3和4之间添加一个额外的列,它也将停止工作
您可以尝试查找最近的tr元素,并在该元素中查找类为item\u requeststatus
的td,谢谢,先生。简单易懂。