Выберите опцию по сравнению с таблицей строк - PullRequest
Новая
       6

Выберите опцию по сравнению с таблицей строк

0 голосов
/ 19 сентября 2018

У меня есть эта кнопка для добавления <Select>, но опция не должна отображать то, что уже находится в строке таблицы (математика, английский, естествознание) Так что мне нужно было только Показать PE SUBJECT в параметрах <select> , я пытался выполнить .each в JQuery, но не могу сравнить их.Я пытаюсь сделать мой стол динамическим.

Это мой пример 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>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Измените вашу функцию 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;
        };
    });
0 голосов
/ 19 сентября 2018

вы можете сравнить как: 

$('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

...