Vergleichen der Zelle mit einer Tabelle vor dem Kopieren der Zeile in die Tabelle aus einer anderen Tabelle mit jQuery

Question

Ich versuche, die zweite Zelle aus einer Zeile mit der zweiten Zelle aller Zeilen in einer Tabelle zu vergleichen, bevor Sie die Zeile in die Tabelle kopieren eine andere Tabelle mit jQuery. Aber ich kann die Bedingungsklausel nicht herausfinden. Dies ist, was ich habe:

$(function(){ 
    $(document).on("click","#submit",function(){ 
    var getSelectedRows = $("#schedule input:checked").parents("tr").clone(); 
    if ($('#results').find("tr").filter(":contains('$('td:first', $(this).parents('tr')).text()')")) 
     alert("You can't have two events at the same time!"); 
    else 
     $("#results tbody").append(getSelectedRows); 
    }) 
}) 

Ich habe diesen HTML:

<table id="schedule" class="table table-stripped table-bordered table-hover"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>time</th> 
     <th>room</th> 
     <th>presenter</th> 
     <th>title</th> 
     <th>detail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><input type="checkbox" value="yes"></td> 
     <td>9:00am</td> 
     <td>SE135</td> 
     <td>aaaaa</td> 
     <td>aaaaaa</td> 
     <td>aaaaaaaa</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" value="yes"></td> 
     <td>9:00am</td> 
     <td>SE145</td> 
     <td>aaaaab</td> 
     <td>aaaaaa</td> 
     <td>aaaaaaaa</td> 
    </tr> 
    </tbody> 
</table> 
<input id="submit" type="button" value="Submit"> 
</article> 
<table id="results"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>time</th> 
     <th>room</th> 
     <th>presenter</th> 
     <th>title</th> 
     <th>detail</th> 
    </tr> 
    </thead> 
    <tbody> 


    </tbody> 
</table> 

Jede Hilfe ist willkommen. Vielen Dank im Voraus.

Answer 1

Zunächst müssen Sie alle Instanzen ausgewählter Zeilen durchlaufen und jede Zeile mit den vorhandenen in der Ergebnistabelle vergleichen.

Ich würde dies im umgekehrten Prozessfluss tun .... sammeln Sie ein Array der Werte, die bereits in den Ergebnissen vorhanden sind ... dann, wie Sie die geprüften Zeilen in der Haupttabelle durchlaufen, vergleichen Sie diesen Wert mit dem Array.

Beachten Sie, dass die Zugabe von gemeinsamen Klassen und data- Attributen helfen kann, Dinge vereinfachen auch

$(function() { 
 
    $(document).on("click", "#submit", function() { 
 
    var $resBody = $('#results tbody'), 
 
     // create array of rooms already in results 
 
     existingRooms = $resBody.find('tr[data-room]').map(function() { 
 
     return $(this).data('room') 
 
     }).get(); 
 
    // log array for demo purposes 
 
    console.log('existingRooms', JSON.stringify(existingRooms)); 
 
    
 
    // now loop through the selected checkboxes 
 
    $("#schedule input:checked").each(function() { 
 
     var $row = $(this).closest('tr'), 
 
     room = $row.data('room'); 
 
     // is current room instance already in array? 
 
     if ($.inArray(room, existingRooms) === -1) { 
 
     $resBody.append($row.clone()); 
 
     } else { 
 
     alert("Room " + room +' already selected'); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule" class="table table-stripped table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>time</th> 
 
     <th>room</th> 
 
     <th>presenter</th> 
 
     <th>title</th> 
 
     <th>detail</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr data-room="SE135"> 
 
     <td><input type="checkbox" value="yes"></td> 
 
     <td>9:00am</td> 
 
     <td class="room">SE135</td> 
 
     <td>aaaaa</td> 
 
     <td>aaaaaa</td> 
 
     <td>aaaaaaaa</td> 
 
    </tr> 
 
    <tr data-room="SE145"> 
 
     <td><input type="checkbox" value="yes" checked></td> 
 
     <td>9:00am</td> 
 
     <td class="room">SE145</td> 
 
     <td>aaaaab</td> 
 
     <td>aaaaaa</td> 
 
     <td>aaaaaaaa</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<input id="submit" type="button" value="Submit"> 
 

 
<table id="results"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>time</th> 
 
     <th>room</th> 
 
     <th>presenter</th> 
 
     <th>title</th> 
 
     <th>detail</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 

 
    </tbody> 
 
</table>