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,谢谢,先生。简单易懂。