Verwenden von 2 Dropdown-Menüs zum Erstellen von 2 nebeneinander liegenden Tabellenzeilen zum Vergleichen von Daten - JSON

Vielen Dank für Ihre Hilfe im Voraus. Ich habe Code für eine Seite auf meiner Website gehackt und ich bin an einer Straßensperre.Verwenden von 2 Dropdown-Menüs zum Erstellen von 2 nebeneinander liegenden Tabellenzeilen zum Vergleichen von Daten - JSON

Das Ziel ist, zwei Drop-Down-Auswahl zu haben, die für eine Vergleichstabelle zwei Tabellenzeilen (die Anzeige in vertikalen Spalten nebeneinander produzieren.

Ich weiß, dass der Code nicht korrekt ist, weil ich in denen ich ziehe Die gleichen Werte zweimal, aber ich bin mir nicht sicher, wo ich die Änderungen vornehmen soll, um das zweite Drop-down in Daten aus einer zweiten Karriere zu ziehen.

So wie es jetzt funktioniert, erzeugen beide Dropdown-Listen dieselbe Tabellenzeile.Wenn ein Dropdown aktualisiert wird, wird das vorhandene überschrieben Ergebnisse

Hier ist eine https://jsfiddle.net/0qwz497e/, die zeigt, wo ich bei Nr. bin w.

Ich beabsichtige auch, die Drop-Downs durchsuchbar zu machen, aber diese zuerst ausbügeln wollen. Ein Gedanke, den ich hatte, war, das Anrufereignis so zu ändern, dass es nicht aktualisiert wurde, bis ein "Vergleichen" -Knopf angeklickt wurde. Jede Hilfe wäre willkommen. direkt

Dank

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <style> 
table { border-collapse: collapse; } 
tr { display: block; float: left; } 
th, td { display: block; border: 1px solid black; } 
</style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select name="" id="my-select"></select> 
<select name="" id="my-select-2"></select> 

<table id="my-table" border="1" style="width:100%"> 
    <thead> 

    </thead> 
    <tbody> 
    </tbody> 
</table> 

    </body> 

</html> 
<script> 
    var myCareerInfo = { 
    careers: [{ 
    name: 'Occupational Therapy', 
    id:123, 
    careerInfo: { 
     salary: 'Salary: $68,555', 
     education: 'Education: Masters', 
     skills: 'Example, Example, Example', 
     description: 'Occupational therapist help people with their ADLs. They blah blah blah...' 
    } 
    }, { 
    name: 'Phlebotomist', 
    id:456, 
    careerInfo: { 
     salary: 'Salary: $46,753', 
     education: 'Education: Certificate Program', 
     skills: 'Example, Example, Example', 
     description: 'Phlebotomists draw blood. They blah blah blah...' 
    } 
    }, { 
    name: 'Physical Therapist', 
    id:789, 
    careerInfo: { 
     salary: 'Salary: $88,555', 
     education: 'Education: Doctorate', 
     skills: 'Example, Example, Example', 
     description: 'Physical therapist help people recover function after an injury. They blah blah blah...' 
    } 
    }] 
} 

function populateSelectBoxes($select, data) { 
    var careers = []; 
    $.each(data, function() { 
    careers.push('<option value="'+this.id+'">' + this.name + '</option>'); 
    }); 
    $select.append(careers.join('')); 
} 

function populateTableRow($tableBody, data, selectedCareerId) { 
    var career; 
    $.each(data, function() { 
    if (this.id == selectedCareerId) { 
     career = this; 
     return false; 
    } 
    }); 
    $tableBody.html('<tr style="width:50%">'+ 
        '<td>' + career.name + '</td>'+ 
        '<td>' + career.careerInfo.salary +'</td>'+ 
        '<td>' + career.careerInfo.education + '</td>'+ 
        '<td>' + career.careerInfo.skills + '</td>'+ 
        '<td>' + career.careerInfo.description + '</td>'+ 
        '</tr>'+ 
        '<tr style="width:50%">'+ 
        '<td>' + career.name + '</td>'+ 
        '<td>' + career.careerInfo.salary +'</td>'+ 
        '<td>' + career.careerInfo.education + '</td>'+ 
        '<td>' + career.careerInfo.skills + '</td>'+ 
        '<td>' + career.careerInfo.description + '</td>'+ 
        '</tr>'); 


} 
populateSelectBoxes($('#my-select'), myCareerInfo.careers); 

$('#my-select').change(function() { 
    var $this = $(this); 
    var selection = $this.val(); 
    populateTableRow($('#my-table tbody'), myCareerInfo.careers, selection); 
}); 
populateSelectBoxes($('#my-select-2'), myCareerInfo.careers); 

$('#my-select-2').change(function() { 
    var $this = $(this); 
    var selection = $this.val(); 
    populateTableRow($('#my-table tbody'), myCareerInfo.careers, selection); 
}); 
</script>

Der Großteil des Codes kam von @ DelightedD0D und ihrer ursprünglichen Antwort auf another dropdown question ich auf dieser Antwort nicht kommentiert noch den Ruf hat.

Quelle

2016-09-22 Scott Bottomley

Es gibt zu viele Ansätze, um es zu lösen.

Ich versuchte eine (eine der möglichen) konservative Lösung über Ihren Code.

Sie können es in jsfiddle sehen.

Zusammengefasst:

function populateTableRow($tableBody, data, selectBoxes) { 
    var career = []; 

    selectBoxes.map(function(s){ 
     var currentId = s.val(); 
     return data.map(function(item){ 
      if(item.id == currentId) career.push(item); 
     }) 
    }); 
    [...] (See jsfiddle for the rest) 
};

...

var selectBoxes = [ 
    populateSelectBoxes($('#my-select'), myCareerInfo.careers), 
    populateSelectBoxes($('#my-select-2'), myCareerInfo.careers), 
] 

$('#my-select').change(function() { 
    populateTableRow($('#my-table tbody'), myCareerInfo.careers, selectBoxes); 
}); 


$('#my-select-2').change(function() { 
    populateTableRow($('#my-table tbody'), myCareerInfo.careers, selectBoxes); 
});

... aber in der Tat, würde meiner Meinung nach besser sein, direkt populateTableRow() ohne Parameter aufrufen und Daten nehmen direkt durch Umfang Vererbung. Besser das Ganze in einem einzigen Verschluss einschließen. Aber wie gesagt, ich habe versucht, so wenig Änderungen wie möglich an Ihrem Code vorzunehmen. ;-)

Also, der Punkt hier ist, dass ich Verweise auf beide selectboxes direkt übergeben, weil Sie die gesamte Tabelle jedes Mal überschreiben (so müssen Sie beide Auswahlwerte kennen).

Ein anderer Ansatz wäre, die gesamte Tabelle vorzuspielen und nur die Zellen der rechten Spalte zu aktualisieren.

Und ein drittes, um Ihre Funktion in einem Verschluss zu umgeben, in dem Sie sich an alle vorherigen Auswahlen erinnern konnten, sogar nur eine einzelne Auswahlbox ändern.

HINWEIS: Vor ein paar Jahren amüsierte ich mich mit einem ähnlichen Problem.Wenn Sie versuchen, Eigenschaften verschiedener Dinge visuell zu vergleichen (nicht nur zwei), könnte meine Lösung für Sie interessant sein: iCompare Ich nannte es.

(Demostration Link funktioniert nicht, weil der Server vor einiger Zeit gestorben ... Ich entschuldige mich dafür).

Es hilft bei Vergleichen, weil der Benutzer nicht interessante Elemente und/oder Merkmale dynamisch entfernen kann und die Merkmale, die allen Elementen gemeinsam sind, werden ebenfalls aus der Vergleichstabelle entfernt und in einer Zusammenfassung (von gemeinsamen Werten) angezeigt.

Quelle

2016-09-22 10:05:18 bitifet

Danke Bitifet. Ich musste es ein wenig zwicken, um die Datenzellen zwischen den beiden Spalten auszurichten, wenn die Daten unterschiedliche Längen hatten (im Beispiel, Karriere 1 + 2 passen gut zusammen, aber Hinzufügen von Physiotherapie verdrehte die Zeilen). Ich konnte es mit deiner Hilfe zum Laufen bringen. Du = Lebensretter! Vielen Dank! –

Ich bemerkte etwas seltsames in der Tabelle rendern bestellen, aber ich würde keine Zeit vergeuden, Arbeitscode zu verstehen. Jetzt bemerke ich, dass css zwickt. Aber, wenn Sie den ganzen Tabellencode sowieso umschreiben, warum nicht einfach in die übliche Reihenfolge bringen? Sie können auch (in beiden Fällen natürlich: Ich vermied es, um Codeänderungen zu minimieren) über die Karriere iterieren, um Codewiederholungen zu vermeiden und bei Bedarf weitere Spalten hinzufügen zu können. – bitifet

Ich habe zwei Tabellen erstellt und sie nebeneinander für zwei Dropdowns ausgekleidet. Hoffe, das hilft ..

 <select name="" id="my-select"></select> 
    <select name="" id="my-select-2"></select> 
    <div> 
    <table id="my-table1" border="1" style="float:left; width:49%;"> 
     <thead> 

     </thead> 
     <tbody> 
     </tbody> 
    </table> 

    <table id="my-table2" border="1" style="width:49%; float:right;"> 
     <thead> 

     </thead> 
     <tbody> 
     </tbody> 
    </table> 
     </div> 

    <script> 
     var myCareerInfo = { 
     careers: [{ 
     name: 'Career 1', 
     id:123, 
     careerInfo: { 
      salary: 453245, 
      education: 45545, 
      skills: '75f', 
      description: '5 B.' 
     } 
     }, { 
     name: 'Career 2', 
     id:456, 
     careerInfo: { 
      salary: 11221, 
      education: 542222, 
      skills: '59f', 
      description: '2 B.' 
     } 
     }, { 
     name: 'Physical Therapist', 
     id:789, 
     careerInfo: { 
      salary: 'Salary: $88,555', 
      education: 'Education: Doctorate', 
      skills: 'Example, Example, Example', 
      description: 'Physical therapist help people recover function after an injury. They blah blah blah...' 
     } 
     }] 
    } 

    function populateSelectBoxes($select, data) { 
     var careers = []; 
     $.each(data, function() { 
     careers.push('<option value="'+this.id+'">' + this.name + '</option>'); 
     }); 
     $select.append(careers.join('')); 
    } 

    function populateTableRow($tableBody, data, selectedCareerId) { 
     var career; 
     $.each(data, function() { 
     if (this.id == selectedCareerId) { 
      career = this; 
      return false; 
     } 
     }); 
     $tableBody.html('<tr style="width:100%">'+ 
         '<td>' + career.name + '</td>'+ 
         '<td>' + career.careerInfo.salary +'</td>'+ 
         '<td>' + career.careerInfo.education + '</td>'+ 
         '<td>' + career.careerInfo.skills + '</td>'+ 
         '<td>' + career.careerInfo.description + '</td>'+ 
         '</tr>'); 


    } 
    populateSelectBoxes($('#my-select'), myCareerInfo.careers); 

    $('#my-select').change(function() { 
     var $this = $(this); 
     var selection = $this.val(); 

     populateTableRow($('#my-table1 tbody'), myCareerInfo.careers, selection); 
    }); 
    populateSelectBoxes($('#my-select-2'), myCareerInfo.careers); 

    $('#my-select-2').change(function() { 
     var $this = $(this); 
     var selection = $this.val(); 
     populateTableRow($('#my-table2 tbody'), myCareerInfo.careers, selection); 
    }); 

    // initialize tables 
    populateTableRow($('#my-table1 tbody'), myCareerInfo.careers, $('#my-select').val()); 
    populateTableRow($('#my-table2 tbody'), myCareerInfo.careers, $('#my-select-2').val()); 


    </script>

Quelle

2016-09-22 08:02:03

Dank T.Shah Ich habe Ihren Rat in die Tat umgesetzt und es half mir herauszufinden, wo einige meiner Probleme waren. Ich ging mit der Lösung von @bitifet. Während Ihre Antwort alles getan hat, was ich in der Frage gefragt habe, konnte ich die Zeilen der Tabellen nicht aneinanderreihen, wenn die Daten unterschiedlich lang waren. Danke für deine Antwort –

Verwenden von 2 Dropdown-Menüs zum Erstellen von 2 nebeneinander liegenden Tabellenzeilen zum Vergleichen von Daten - JSON

Antwort

Verwandte Themen