在不同的表中按類或ID突出顯示2行

Question

我在PHP中動態創建兩個表，我希望能夠輕鬆比較兩個表中的行。我希望能夠在其他表格中突出顯示一行中的任何一個表格和相應的行（通過id）。

我發現在這裏有很多類似的情況，但他們似乎都通過懸停在第1行將突出顯示錶1中的第1行。我希望突出顯示功能的行ID（或類，不知道這是更合適的）。

在下面的示例中，如果我將鼠標懸停在表1中的行ID 123上，表2中的行ID 123也會突出顯示。反過來，突出顯示錶2中的行號123將突出顯示錶1中的行號123.

這裏的技巧是這些行可以是任何順序，所以計數或做第n個東西不會在這裏工作。

<table id="t1"> 
    <tr id="123"><td>......</td></tr> 
    <tr id="456"><td>......</td></tr> 
    <tr id="789"><td>......</td></tr> 
    <tr id="0AB"><td>......</td></tr> 
    <tr id="CDE"><td>......</td></tr> 
</table> 
<p>Table 2</p> 
<table id="t2"> 
    <tr id="CDE"><td>......</td></tr> 
    <tr id="123"><td>......</td></tr> 
    <tr id="0AB"><td>......</td></tr> 
    <tr id="456"><td>......</td></tr> 
    <tr id="789"><td>......</td></tr> 
</table> 

我很喜歡Javascript和jQuery。此時此刻全部虧損。在這一點上試圖破解其他解決方案一起工作是超越我的。

Answer 1

Id不能在單個HTML文檔中重複。因此，修改您的HTML以使用class而不是id。然後，你可以參考下面的代碼爲你的邏輯：

$(document).ready(function() { 
 
    $("table tr").hover(function() { 
 
     $("tr").removeClass("highlight"); 
 
     $("." + $(this).attr("class")).addClass("highlight"); 
 
    }, 
 
    function() { 
 

 
     $("." + ($(this).attr("class").split(' '))[0]).removeClass("highlight"); 
 
    }); 
 
});

.highlight { 
 
    background: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table id="t1"> 
 
    <tr class="123"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="456"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="789"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="0AB"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="CDE"> 
 
    <td>......</td> 
 
    </tr> 
 
</table> 
 
<p>Table 2</p> 
 
<table id="t2"> 
 
    <tr class="CDE"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="123"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="0AB"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="456"> 
 
    <td>......</td> 
 
    </tr> 
 
    <tr class="789"> 
 
    <td>......</td> 
 
    </tr> 
 
</table>

Answer 2

對於初學者來說，ID應該是唯一的 - 所以你的運氣不符合這些。用類或數據屬性替換它們，例如

<table> 
    <tr data-set="123"><td>...</td></tr> 
    <tr data-set="abc"><td>...</td></tr> 
    <tr data-set="xyz"><td>...</td></tr> 
    <tr data-set="987"><td>...</td></tr> 
</table> 

<table> 
    <tr data-set="123"><td>...</td></tr> 
    <tr data-set="abc"><td>...</td></tr> 
    <tr data-set="xyz"><td>...</td></tr> 
    <tr data-set="987"><td>...</td></tr> 
</table> 

那麼這樣的事情，你基本上得到你徘徊在元素的數據屬性，並搜索具有相同屬性數據的其他元素。

https://jsfiddle.net/yqm0z5up/1/

藉口代碼的草率性質，但應足以讓你在正確的地方尋找。