如何在jQuery中表的特定行索引上建立if語句

Question

基於最后一個問題，我現在設法使代碼在要創建的網站上的表中工作。 現在，我必須將一些jQuery基於if語句。

如果這些行在“ Senmiddelalder”行之前，則應執行一些代碼
如果該行是“ 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> 

Answer 1

我不喜歡if陳述。 特別是在html頁面上使用jquery時。 因此，在您的情況下，我首先要向您的表行添加類：

<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個類也必須這樣做...

另外，如果您為每個td添加類-主要只是列名，則不需要.find('td:nth-child(6)')表達式，而只需通過其類名選擇元素即可。 由於您的上一行/下一行存儲在jquery對象中，因此必須將對象上下文與選擇器一起傳遞。 這將從以下位置更改您的代碼：

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

至

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

該解決方案的好處是，只要在相應的元素上保留正確的類，就可以自由更改表的列/行順序。 在您的解決方案中，如果您插入或刪除列，則必須更改所有js n子表達式，以查看另一個索引。

Answer 2

您可以獲取當前行索引，然后可以添加依賴於此的條件。 在這里查看示例

$(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條件下添加的注釋。 同樣，您不應在頁面上為所有輸入使用相同的ID。 <input ID="input">