我想要創建一個HTML表格，您可以在其中選擇列，即當您將鼠標懸停在列上時，它們會突出顯示，並且當您單擊時，它們會重定向到新頁面。 （例如，點擊第五欄會帶您到column.aspx?col=5）。使用可點擊的列創建一個HTML表格
麻煩的是，HTML表中的行工作：<tr><td>...</td></tr>
所以我會漂浮<a> s到代表列和孩子<span>小號實現這一目標之間審議代表行，與使用table和實現jQuery的預期效果。
哪個更好（以及爲什麼）？或者我應該考慮另一種解決方案？請指教。
您可以通過結合click和mouseover事件給每個td容易jQuery。
$("table-selector tr td").each(function(){
$(this).click(function(){
// TODO with click
}).hover(function(){
// TODO with mouseover
},function(){
// TODO with mouseout
});
}
UPDATE：分離細胞指數和行索引和保存主題爲每個td「s的數據：
$("#myTable tr").each(function(r){
var row = r;
$("td", this).each(function(d){
var cell = d;
$(this)
.data("rowIndex", row)
.data("cellIndex", cell)
.click(function(){
$("#message").text("Row-Index is: " + $(this).data("rowIndex") +
" and Cell-Index is: " + $(this).data("cellIndex"));
})
.hover(
function(){
$(this).addClass("td-over").css({"text-align":"center"});
},function(){
$(this).removeClass("td-over").css({"text-align":"left"});
});
});
});
如果要使用jQuery來完成此操作，可以使用:nth-child()-Selector（假設您沒有跨多列的<td /> s）在列中選擇所有<td />。
請參閱this fiddle瞭解針對表格第二列的onyl示例。
Javascript方法的不足之處在於，它需要Javascript才能啓用（duh！）。
我認爲這取決於你的目標市場。如果你可以使用JavaScript而不用擔心沒有它的用戶，那麼是的，使用JavaScript的方法就是使用JavaScript。
此外，它將成爲最乾淨的，因爲您不需要爲它添加任何類型的HTML噪音。你只會遍歷。
我會使用現有的jQuery表的解決方案，但如果你想只檢測列點擊，你可以這樣做：http://jsfiddle.net/rkw79/PagTJ/
$('table').delegate('td','click',function() {
alert('column ' + $(this).index());
});
（1）如果它是動態鏈接你在說什麼，然後jQuery。 （2）否則，我會全心全意地支持你在span標籤中錨鏈接的想法，並且只使用CSS。
如果可以，請剪下javascript。通過這種方式，您可以減少加載時間（通常情況下），並且可以吸引沒有啓用JavaScript的用戶（或者瀏覽器已經過時的用戶）。如果您只需創建？col = 1到col = 5的鏈接，那麼請執行此操作。這並不困難。
-
另一種選擇，如果你有很多欄目，是將一些PHP在那裏了，並運行一個for循環，在輸出鏈接標記所有號碼：例如：
<?php
for($i=0;$i<200;$i++){
echo '<span><a href="?col=' . $i . '">link</a></span>';
}
?>
您可以使用JavaScript onclick事件，像這樣：
<td onclick="window.location='column.aspd?col=5'">...</td>
或
<td onclick="myFunction(this)">...</td>
瞭解更多自定義功能。
我不知道您是否只想單擊每列頂部的單元格，但是如果您想要爲整列執行此操作，則可以將此事件添加到列中的每個單元格。
例如你有以下的HTML
<table>
<thead>
<td>1</td>
<td>2</td>
</thead>
<tbody>
<td>google</td>
<td>fb</td>
</tbody>
</table>
jQuery的
$("thead td").click(function(){
console.log($(this).index());
var index=$(this).index();
console.log("column.aspx?col="+(index+1));
//location.href="column.aspx?col="+(index+1);
});
詹姆斯，這樣做你問什麼。此代碼可以放在任何帶有表格的頁面上以獲得突出顯示的列效果。我會使用這個解決方案，而不是創建我自己的自定義表類結構，因爲它與現有代碼兼容，它允許表格數據顯示在它所屬的位置，並且jQuery負責處理幾行代碼中的所有繁重工作。
<style type="text/css">
.columnhover {background-color: yellow;}
</style>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function($)
{
$('tr th,td').hover(function()
{
var columnNum = $(this).parent('tr').children().index($(this));
var $wholeColumn = $(this).parents('table').find('td:nth-child(' + (columnNum + 1) + ')');
$wholeColumn.addClass('columnhover');
},
function()
{
$('table').find('td').removeClass('columnhover');
});
$('tr th,td').click(function()
{
var columnNum = $(this).parent('tr').children().index($(this));
window.location = "test.html?column=" + (columnNum + 1);
});
});
/* ]]> */
</script>
我想說使用jQuery – Petah