Как я могу основать оператор if на конкретный индекс строки таблицы в jQuery - PullRequest
Новая
       1

Как я могу основать оператор if на конкретный индекс строки таблицы в jQuery

0 голосов
/ 05 октября 2018

Основываясь на последнем вопросе, теперь мне удалось заставить код работать в таблице на сайте, который я создаю.Теперь я должен основывать некоторые из jQuery на операторах if.

Если строки находятся перед строкой «Senmiddelalder», он должен делать некоторый код
Если строка IS «Senmiddelalder», он должен делать какой-то другой код
Если строка "Kolonitiden", то она должна иметь какой-то другой код
и, наконец, если строка после "Kolonitiden", она должна делать какой-то другой код

Теперь она просто делает то же самое, независимо отнад какой строкой я работаю, а это не то, что нужно делать.

Я не лучший в jQuery, я должен упомянуть, но я очень стараюсь понять это.

Если бы кто-нибудь мог помочь, я был бы очень признателен.

Пока у меня есть этот код 

$(function(){
                        
            $("input").keyup(function(){
                var $currentTr = $(this).closest('tr');
                var $nextTr = $currentTr.next();
                var $prevTr = $currentTr.prev();
                var $nextTr2 = $nextTr.next();
                var $prevTr2 = $prevTr.prev();
                var value = $(this).val();
               
                
                if ($('tr:lt(5)')){
                    
                    $currentTr.find('td:nth-child(6)').html(value);
                    $nextTr.find('td:nth-child(6)').html(value * 1 / 2);
                    $prevTr.find('td:nth-child(6)').html(value * 2);
                
                    if (value === '') {
                        $currentTr.find('td:nth-child(6)').html("");
                        $nextTr.find('td:nth-child(6)').html("");
                        $prevTr.find('td:nth-child(6)').html("");
                    }
                    
                }
                else if ($('tr:nth-child(6)')){
                    
                    $currentTr.find('td:nth-child(6)').html(value);
                    $nextTr.find('td:nth-child(6)').html(value * 3 / 4);
                    $nextTr2.find('td:nth-child(6)').html(value * 1 / 2);
                    $prevTr.find('td:nth-child(6)').html(value * 2);
                
                    if (value === '') {
                        $currentTr.find('td:nth-child(6)').html("");
                        $nextTr.find('td:nth-child(6)').html("");
                        $nextTr2.find('td:nth-child(6)').html("");
                        $prevTr.find('td:nth-child(6)').html("");
                    }
                    
                }
                else if ($('tr:nth-child(7)')){
                    $currentTr.find('td:nth-child(6)').html(value);
                    $nextTr.find('td:nth-child(6)').html(value * 3 / 4);
                    $nextTr2.find('td:nth-child(6)').html(value * 1 / 2);
                    $prevTr.find('td:nth-child(6)').html(value * 1.33);
                
                    if (value === '') {
                        $currentTr.find('td:nth-child(6)').html("");
                        $nextTr.find('td:nth-child(6)').html("");
                        $nextTr2.find('td:nth-child(6)').html("");
                        $prevTr.find('td:nth-child(6)').html("");
                    }
                }
                else if ($('tr:gt(6)')) {
                    $currentTr.find('td:nth-child(6)').html(value);
                    $nextTr.find('td:nth-child(6)').html(value * 3 / 4);
                    $nextTr2.find('td:nth-child(6)').html(value * 1 / 2);
                    $prevTr.find('td:nth-child(6)').html(value * 1.33);
                    $prevTr2.find('td:nth-child(6)').html(value * 2);
                
                    if (value === '') {
                        $currentTr.find('td:nth-child(6)').html("");
                        $nextTr.find('td:nth-child(6)').html("");
                        $nextTr2.find('td:nth-child(6)').html("");
                        $prevTr.find('td:nth-child(6)').html("");
                        $prevTr2.find('td:nth-child(6)').html("");
                    }
                }
                
                
            });
            
            $("input").click(function() {
                $("input").val("");
                $("tr td:nth-child(6)").empty();
            });
            
        });
    </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table ID="tradeTable" class="tableTradeContent">
        <tr>
            <th>Tidsalder</th>
            <th>Billeder</th>
            <th>Varer</th>
            <th>Bedre lavere alternativ</th>
            <th>Bedre højere alternativ</th>
            <th>Resultat</th>
            <th>Antal</th>
            <th>Ratio</th>
            <th>pris / 24 timer</th>
        </tr>
        <tr>
            <td>Bronzealder</td>
            <td><img src="img/BA/marmor.png"><img src="img/BA/tømmer.png"><img src="img/BA/farvestoffer.png"><img src="img/BA/sten.png"><img src="img/BA/vin.png"></td>
            <td>Marmor, Tømmer, Farvestoffer, Sten, Vin</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>400/400</td>
        </tr>
        <tr>
            <td>Jernalder</td>
            <td><img src="img/JA/stof.png"><img src="img/JA/ibenholt.png"><img src="img/JA/smykker.png"><img src="img/JA/jern.png"><img src="img/JA/kalksten.png"></td>
            <td>Stof, Ibenholt, Smykker, Jern, Kalksten</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>800/800</td>
        </tr>
        <tr>
            <td>Tidlig Middelalder</td>
            <td><img src="img/TM/kobber.png"><img src="img/TM/guld.png"><img src="img/TM/granit.png"><img src="img/TM/honning.png"><img src="img/TM/alabast.png"></td>
            <td>Kobber, Guld, Granit, Honning, Alabast</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>1600/1600</td>
        </tr>
        <tr>
            <td>Højmiddelalder</td>
            <td><img src="img/HM/teglsten.png"><img src="img/HM/glas.png"><img src="img/HM/tørret urt.png"><img src="img/HM/tov.png"><img src="img/HM/salt.png"></td>
            <td>Teglsten, Glas, Tørret Urt, Tov, Salt</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>3200/3200</td>
        </tr>
        <tr>
            <td>Senmiddelalder</td>
            <td><img src="img/SM/basalt.png"><img src="img/SM/messing.png"><img src="img/SM/krudt.png"><img src="img/SM/silke.png"><img src="img/SM/talkumpudder.png"></td>
            <td>Basalt, Messing, Krudt, Silke, Talkumpudder</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>6400/6400</td>
        </tr>
        <tr>
            <td>Kolonitiden</td>
            <td><img src="img/KT/kaffe.png"><img src="img/KT/papir.png"><img src="img/KT/porcelæn.png"><img src="img/KT/tjære.png"><img src="img/KT/metaltråd.png"></td>
            <td>Kaffe, Papir, Porcelæn, Tjære, Metaltråd</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>9600/9600</td>
        </tr>
        <tr>
            <td>Industritiden</td>
            <td><img src="img/IT/koks.png"><img src="img/IT/gødning.png"><img src="img/IT/gummi.png"><img src="img/IT/tekstiler.png"><img src="img/IT/hvalolie.png"></td>
            <td>Koks, Gødning, Gummi, Tekstiler, Hvalolie</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>12800/12800</td>
        </tr>
        <tr>
            <td>Den Progressive Æra</td>
            <td><img src="img/DPÆ/asbest.png"><img src="img/DPÆ/sprængstoffer.png"><img src="img/DPÆ/maskindele.png"><img src="img/DPÆ/benzin.png"><img src="img/DPÆ/blik.png"></td>
            <td>Asbest, Sprængstoffer, Maskindele, Benzin, Blik</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>16000/16000</td>
        </tr>
        <tr>
            <td>Moderne Æra</td>
            <td><img src="img/MÆ/færdigretter.png"><img src="img/MÆ/jernbeton.png"><img src="img/MÆ/smagsstoffer.png"><img src="img/MÆ/luksusmaterialer.png"><img src="img/MÆ/emballage.png"></td>
            <td>Færdigretter, Jernbeton, Smagsstoffer, Luksusmaterialer, Emballage</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>19200/19200 (*)</td>
        </tr>
        <tr>
            <td>Den Postmoderne Tidsalder</td>
            <td><img src="img/DPT/genomdata.png"><img src="img/DPT/industrifilter.png"><img src="img/DPT/genanvendelige ressourcer.png"><img src="img/DPT/halvledere.png"><img src="img/DPT/stål.png"></td>
            <td>Genondata, Industrifilter, Genanvendelige Ressourcer, Halvledere, Stål</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>24000/24000 (*)</td>
        </tr>
        <tr>
            <td>Nutiden</td>
            <td><img src="img/NT/biometriske data.png"><img src="img/NT/elektromagneter.png"><img src="img/NT/gas.png"><img src="img/NT/plastik.png"><img src="img/NT/robotter.png"></td>
            <td>Biometriske Data, Elektromagneter, Gas, Plastik, Robotter</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>28800/28800 (*)</td>
        </tr>
        <tr>
            <td>Morgendagen</td>
            <td><img src="img/MD/ernæringsforskning.png"><img src="img/MD/papirbeton.png"><img src="img/MD/konserveringsmidler.png"><img src="img/MD/intelligente materialer.png"><img src="img/MD/gennemskinneligt beton.png"></td>
            <td>Ernæringsforskning, Papirbeton, Konserveringsmidler, Intelligente Materialer, Gennemskinneligt Beton</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>33600/33600 (*)</td>
        </tr>
        <tr>
            <td>Fremtiden</td>
            <td><img src="img/FT/alger.png"><img src="img/FT/bio-geokemiske data.png"><img src="img/FT/nanopartikler.png"><img src="img/FT/renset vand.png"><img src="img/FT/superleder.png"></td>
            <td>Alger, Bio-Kemiske Data, Nanopartikler, Renset Vand, Superledere</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>40000/40000 (*)</td>
        </tr>
        <tr>
            <td>Arktiske Fremtid</td>
            <td><img src="img/AF/data om kunstig intelligens.png"><img src="img/AF/bioplastik.png"><img src="img/AF/nanotråd.png"><img src="img/AF/papirbatterier.png"><img src="img/AF/bio benzin.png"></td>
            <td>Data om Kunstig Intelligens, Bioplastik, Nanotråd, Papirbatterier, Bio Benzin</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>46800/46800 (*)</td>
        </tr>
        <tr>
            <td>Oceanisk Fremtid</td>
            <td><img src="img/OF/kunstskæl.png"><img src="img/OF/biolys.png"><img src="img/OF/koraller.png"><img src="img/OF/perler.png"><img src="img/OF/plankton.png"></td>
            <td>Kunstskæl, Biolys, Koraller, Perler, Plankton</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>51600/51600 (*)</td>
        </tr>
        <tr>
            <td>Virtuel Fremtid</td>
            <td><img src="img/VF/kryptovaluta.png"><img src="img/VF/datakrystaller.png"><img src="img/VF/guldris.png"><img src="img/VF/nanitter.png"><img src="img/VF/te silke.png"></td>
            <td>Kryptovaluta, Datakrystaller, Guldris, Nanitter, Te Silke</td>
            <td></td>
            <td></td>
            <td></td>
            <td><input ID="input"></td>
            <td></td>
            <td>64000/64000 (*)</td>
        </tr>
    </table>

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Вы можете получить текущий индекс строки, а затем можете добавлять условия, в зависимости от этого.Смотрите пример здесь 

$(function(){
  $("input").keyup(function(){
    var $currentTr = $(this).closest('tr');
    var $nextTr = $currentTr.next();
    var $prevTr = $currentTr.prev();
    var $nextTr2 = $nextTr.next();
    var $prevTr2 = $prevTr.prev();
    var value = $(this).val();
    if ($currentTr.index() < 5){
      //current row is less than Senmiddelalder
        $currentTr.find('td:nth-child(6)').html(value);
        $nextTr.find('td:nth-child(6)').html(value * 1 / 2);
        $prevTr.find('td:nth-child(6)').html(value * 2);

        if (value === '') {
            $currentTr.find('td:nth-child(6)').html("");
            $nextTr.find('td:nth-child(6)').html("");
            $prevTr.find('td:nth-child(6)').html("");
        }

    }
    else if ($currentTr.index() == 6){
        //current row is Kolonitiden
        $currentTr.find('td:nth-child(6)').html(value);
        $nextTr.find('td:nth-child(6)').html(value * 3 / 4);
        $nextTr2.find('td:nth-child(6)').html(value * 1 / 2);
        $prevTr.find('td:nth-child(6)').html(value * 2);

        if (value === '') {
            $currentTr.find('td:nth-child(6)').html("");
            $nextTr.find('td:nth-child(6)').html("");
            $nextTr2.find('td:nth-child(6)').html("");
            $prevTr.find('td:nth-child(6)').html("");
        }

    }
    else if ($currentTr.index() == 7){
    //current row is Industritiden
        $currentTr.find('td:nth-child(6)').html(value);
        $nextTr.find('td:nth-child(6)').html(value * 3 / 4);
        $nextTr2.find('td:nth-child(6)').html(value * 1 / 2);
        $prevTr.find('td:nth-child(6)').html(value * 1.33);

        if (value === '') {
            $currentTr.find('td:nth-child(6)').html("");
            $nextTr.find('td:nth-child(6)').html("");
            $nextTr2.find('td:nth-child(6)').html("");
            $prevTr.find('td:nth-child(6)').html("");
        }
    }
    else if ($currentTr.index() > 6) {
    //current row is greater than Kolonitiden
        $currentTr.find('td:nth-child(6)').html(value);
        $nextTr.find('td:nth-child(6)').html(value * 3 / 4);
        $nextTr2.find('td:nth-child(6)').html(value * 1 / 2);
        $prevTr.find('td:nth-child(6)').html(value * 1.33);
        $prevTr2.find('td:nth-child(6)').html(value * 2);

        if (value === '') {
            $currentTr.find('td:nth-child(6)').html("");
            $nextTr.find('td:nth-child(6)').html("");
            $nextTr2.find('td:nth-child(6)').html("");
            $prevTr.find('td:nth-child(6)').html("");
            $prevTr2.find('td:nth-child(6)').html("");
        }
    }


});

$("input").click(function() {
    $("input").val("");
    $("tr td:nth-child(6)").empty();
});

});

Обратите внимание на комментарии, добавленные в условии if.Также не следует использовать один и тот же идентификатор на странице для всех входов.<input ID="input">

0 голосов
/ 05 октября 2018

мне не нравятся высказывания.особенно при использовании jquery на html-странице.поэтому в вашем случае я бы сначала начал с добавления классов в строки вашей таблицы: 

<tr class="preSenMiddel"> [...]
<tr class="senMiddel"> [...]
<tr class="kolonitiden"> [...]
<tr class="postKolonitiden"> [...]

Вы должны добавить класс к каждому тегу tr.затем используйте селекторы класса jquery.каждый атрибут html, которому назначен класс, может быть выбран в качестве объекта jquery с помощью выражения: $(".classname") (подробнее о селекторах jquery здесь: https://api.jquery.com/category/selectors/), поскольку ваши <tr> являются элементами родительского элемента вашего<input> элементов, затем вы добавляете селектор-потомок к своему выражению. $(".classname descendant")

Затем вы можете создать четыре различные функции, которые срабатывают в зависимости от используемого входа: 

$(".preSenMiddel input").on("keyup", function(){
  //your code here
}

это должно быть сделано и для других 3 классов ...

кроме того, если вы добавляете классы для каждого тд - в основном только имя столбца, вам не нужно выражение .find('td:nth-child(6)'), нопросто можно выбрать элемент по имени класса. Так как ваши предыдущие / следующие строки хранятся в объектах jquery, вы должны передать контекст объекта с помощью селектора. Это изменит ваш код с: 

 $currentTr.find('td:nth-child(6)').html(value);

в 

$(".classname", $currentTr).html(value);

хорошее решение состоит в том, что вы можете свободно изменять порядок столбцов / строк в таблице, если вы сохраняете правильные классы на соответствующем уровне.г элементов.в вашем решении, если вы вставляете или удаляете столбец, вам нужно изменить все ваши js-ные дочерние выражения, чтобы посмотреть на другой индекс.

...