Aktualisieren Sie den Objektwert mit Kontrollkästchen und senden Sie die Schaltfläche

Question

Hallo Ich arbeite an einem Mini-Projekt, das Objekte zu einem Array hinzufügen und es in einer Tabelle in HTML anzeigen wird.

Ich habe Optionsfeld für jede Zeile/Objekt. Wenn das Kontrollkästchen aktiviert ist, wollte ich einen Wert meines Schlüssels aktualisieren.

<div class="container"> 
    <input id="list-input" /> 
    <select id="select-status"> 
     <option value="on-going">on-going</option> 
     <option value="completed">completed</option> 
    </select> 
    <button id="add">Add To List</button> 
    <button id="update">Mark as Complete</button> 
</div> 
<div class="container"> 
    <h1>Your List</h1> 

    <div> 
     <table id="mylist"> 
      <thead> 
       <th>ID Number</th> 
       <th>Description</th> 
       <th>Status</th> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 
    <button id="clear">clear</button> 
</div> 

jsfiddle code

Ich wollte den Status sa komplett sowohl in meinem Array und in meinem html markieren. Wäre wirklich zu schätzen, Hilfe auf die oben genannten

Answer 1

Dieser Code durchläuft jede Zeile, inspiziert das Kontrollkästchen, und aktualisiert dann die Tabelle und das Array, wenn aktiviert.

$('#update').on('click', function() { 
    var rows = $("#mylist tbody tr"); 

    $.each(rows, function(i, row) { 
     if($(this).find('td').eq(3).find("input").is(":checked")) { 
      $(this).find('td').eq(2).text("complete"); 
      tasks[i].status = "complete";    
     } 
    }); 

    // This console.table is here so you can see that the array is updated. 
    // You can remove it when you are satisfied this works. 
    console.table(tasks); 

});