トグルスイッチの行内のセルの値を変更する

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

あなたは、現在の要素に

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

toggleclick関数は以下のようになります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'; 

} 

td要素の直接の子であり、3〜4の間に余分な列を追加すると、意図したとおりに動作を停止します。

最も近いtr要素を見つけて、その要素内で、クラスitem_requeststatusのtdを探してみることができます。