jquery - 如何将 if 语句基于 jQuery 中表的特定行索引

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>

标签： jqueryhtml-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 个子表达式，以查看另一个索引。