選擇與表格行比較的選項

Question

我有這個按鈕來附加<Select>但是該選項不應顯示表行中已經存在的內容（數學，英語，科學），所以我只需要在<select>選項中顯示PE SUBJECT ，我嘗試做jQuery中的.each，但我無法將兩者進行比較。 我試圖使我的表動態。

這是我的示例JSFiddle https://jsfiddle.net/ta73h4ez/16/

<!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
<script>
    $( document ).ready(function() {
        $( "#add" ).click(function() {
            $('tbody').append('<tr><td><select><option value="math">Math</option><option value="English">English</option><option value="Science">Science</option><option value="PE">PE</option></select></td><tr>');
        });
    });
</script>
<h2>HTML Table</h2>

<table>
    <tbody>
        <tr>
            <th>Subject</th>
            <th>Start Time</th>
            <th>End Time</th>
        </tr>
        <tr>
            <td>Math</td>
            <td>8am</td>
            <td>9am</td>
        </tr>
        <tr>
            <td>English</td>
            <td>10am</td>
            <td>1pm</td>
        </tr>
        <tr>
            <td>Science</td>
            <td>1pm</td>
            <td>3pm</td>
        </tr>
    </tbody>
    </table>
        <input type="button" value = "Add Subject" id ="add">
    </body>
</html>

Answer 1

您可以像這樣比較：

$('table').find('tr').each(function(){
var td1=$(this).find('td').eq(0).text();
$('select').find('option').each(function(){

 var op = $(this).text();
 if(op==td1)
 {
 $(this).hide();
 }

});
});

這是我的樣本JSFiddle jsFiddle

Answer 2

將您的JavaScript函數更改為以下內容。 您可以根據需要優化此代碼。

$( document ).ready(function() {
        $( "#add" ).click(function() {
        var options = getOptions();
        var optionsString = "";
        for(var i = 0; i< options.length; i++){
            optionsString += '<option value="'+options[i]+'">'+options[i]+'</option>';
        }
            $('tbody').append('<tr><td><select>'+optionsString +'</select></td><tr>');
        });

        var getOptions = function(){
            var options = ["Math", "English", "Science", "PE"];
          var allRows = $('table').find('tr');
          for(var i=0; i< allRows.length && options.length>0; i++){
            var subjectText = $(allRows[i]).find('td').eq(0).text();
            var index = options.indexOf(subjectText);
            options = options.splice(index, 1);
          }
          return options;
        };
    });

選擇與表格行比較的選項

問題描述

2 個解決方案

解決方案1
0 已采納 2018-09-19 12:11:09

解決方案2
0 2018-09-19 12:13:20

選擇與表格行比較的選項

問題描述

2 個解決方案

解決方案1 0 已采納 2018-09-19 12:11:09

解決方案2 0 2018-09-19 12:13:20

解決方案1
0 已采納 2018-09-19 12:11:09

解決方案2
0 2018-09-19 12:13:20