Question

我想在切换开关所在的行内更改切换开关上的单元格文本。

表格

<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);
}

我真的需要你的帮助。谢谢。

Answer 1

您需要传递当前元素toggleclick函数

<input id=@item.VisitorId onclick="toggleclick(this, @item.VisitorId)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">

toggleclick功能如下所示。

检查以下示例代码

function toggleclick(_this, x) {
  //var table = document.getElementById("visitor_table");
  var row = $(_this).closest('tr');
  if ($(_this).is(':checked')) // check if checkbox is checked or not
  {
    row.find("td:eq(3)").html("Approved"); //find 3rd cell and set HTML
  } else {
    row.find("td:eq(3)").html("Pending");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="item_id">
      </td>
      <td class="item_firstname">
      </td>
      <td class="item_lastname">
      </td>
      <td class="item_requeststatus">Approved
      </td>
      <td id="item_checkbox">
        <input id=@item.VisitorId onclick="toggleclick(this,2)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
      </td>
    </tr>
    <tr>
      <td class="item_id">
      </td>
      <td class="item_firstname">
      </td>
      <td class="item_lastname">
      </td>
      <td class="item_requeststatus">Approved
      </td>
      <td id="item_checkbox">
        <input id=@item.VisitorId onclick="toggleclick(this)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
      </td>
    </tr>
    <tr>
      <td class="item_id">
      </td>
      <td class="item_firstname">
      </td>
      <td class="item_lastname">
      </td>
      <td class="item_requeststatus">Approved
      </td>
      <td id="item_checkbox">
        <input id=@item.VisitorId onclick="toggleclick(this)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

Answer 2

此方法可以满足您的需要：

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';

}

它不是很灵活，它希望input元素是td元素的直接子元素，如果你在3和4之间添加一个额外的列，它也将停止按预期工作。

您可以尝试找到最接近的tr元素，并在该元素中查找类item_requeststatus的td。

在切换开关上更改行中单元格的值

2 个答案: