如何只選擇table/div中的一個元素？

選擇一個一年
要改變一年的能力（如果意外點擊）
刷新所有年
選擇不同的年份

jQuery :(這是我的失敗入侵企圖;請建議一個pr OPER實現）

$('#year tr td').click(function() { 
    $('#year tr td').removeClass('selected'); 
    var year = $(this).addClass('selected'); 
    $('#year').hide(); 
    $('#vehicle_year').prepend(year).show(); 
}); 

$('#reset').click(function() { 
    $("[prepended=yes]", "#vehicle_year").remove(); 
    $('#vehicle_year').hide(); 
    $('#year tr td').removeClass('selected'); 
    $('#year').show(); 
});

HTML：

<span id="vehicle_year" style="display: none"> <span id="reset">(change year)</span> </span> 
<table id="year" class="vehicle_options"> 
    <tbody><tr> 
     <td id="1980">1980</td> 
     <td id="1981">1981</td> 
     <td id="1982">1982</td> 
     <td id="1983">1983</td> 
     <td id="1984">1984</td> 
     <td id="1985">1985</td> 
     <td id="1986">1986</td> 
    </tr> 
    <tr> 
     <td id="1987">1987</td> 
     <td id="1988">1988</td> 
     <td id="1989">1989</td> 
     <td id="1990">1990</td> 
     <td id="1991">1991</td> 
     <td id="1992">1992</td> 
     <td id="1993">1993</td> 
    </tr> 
    <tr> 
     <td id="1994">1994</td> 
     <td id="1995">1995</td> 
     <td id="1996">1996</td> 
     <td id="1997">1997</td> 
     <td id="1998">1998</td> 
     <td id="1999">1999</td> 
     <td id="2000">2000</td> 
    </tr> 
    <tr> 
     <td id="2001">2001</td> 
     <td id="2002">2002</td> 
     <td id="2003">2003</td> 
     <td id="2004">2004</td> 
     <td id="2005">2005</td> 
     <td id="2006">2006</td> 
     <td id="2007">2007</td> 
    </tr> 
    <tr> 
     <td id="2008">2008</td> 
     <td id="2009">2009</td> 
     <td id="2010">2010</td> 
     <td id="2011">2011</td> 
     <td id="2012">2012</td> 
     <td id="2013">2013</td> 
     <td id="2014">2014</td> 
    </tr> 
    <tr> 
     <td id="2015">2015</td> 
    </tr> 
</tbody></table>

的jsfiddle：http://jsfiddle.net/32ta6/

來源

2014-02-18 fyz

我沒有downvote你。但是，通過將年份加入下拉列表中，您可以使生活變得更簡單（即''）... – War10ck

此實現有什麼問題？你在html中沒有單獨的div。#BYW – danronmoon

#year div。並看到小提琴。它不會讓你改變一年。 – fyz

在這裏你去，它類似於ps2goat，但刪除了不再需要和被去除固定的年份代碼。

http://jsfiddle.net/32ta6/7/

//select year 
$('#year tr td').click(function() { 
// $('#year tr td').removeClass('selected'); 
    var year = $(this).text(); 
    $('#year').hide(); 
    $('#selectedYear').html(year); 
    $('#vehicle_year').show(); 
}); 

$('#reset').click(function() { 
    //$("[prepended=yes]", "#vehicle_year").remove(); 
    $('#vehicle_year').hide(); 
    //$('#year tr td').removeClass('selected'); 
    $('#year').show(); 
});

table id="year" class="vehicle_options"> 
    <tbody><tr> 
     <td id="1980">1980</td> 
     <td id="1981">1981</td> 
     <td id="1982">1982</td> 
     <td id="1983">1983</td> 
     <td id="1984">1984</td> 
     <td id="1985">1985</td> 
     <td id="1986">1986</td> 
    </tr> 
    <tr> 
     <td id="1987">1987</td> 
     <td id="1988">1988</td> 
     <td id="1989">1989</td> 
     <td id="1990">1990</td> 
     <td id="1991">1991</td> 
     <td id="1992">1992</td> 
     <td id="1993">1993</td> 
    </tr> 
    <tr> 
     <td id="1994">1994</td> 
     <td id="1995">1995</td> 
     <td id="1996">1996</td> 
     <td id="1997">1997</td> 
     <td id="1998">1998</td> 
     <td id="1999">1999</td> 
     <td id="2000">2000</td> 
    </tr> 
    <tr> 
     <td id="2001">2001</td> 
     <td id="2002">2002</td> 
     <td id="2003">2003</td> 
     <td id="2004">2004</td> 
     <td id="2005">2005</td> 
     <td id="2006">2006</td> 
     <td id="2007">2007</td> 
    </tr> 
    <tr> 
     <td id="2008">2008</td> 
     <td id="2009">2009</td> 
     <td id="2010">2010</td> 
     <td id="2011">2011</td> 
     <td id="2012">2012</td> 
     <td id="2013">2013</td> 
     <td id="2014">2014</td> 
    </tr> 
    <tr> 
     <td id="2015">2015</td> 
    </tr> 
</tbody></table> 


<span id="vehicle_year" style="display: none"><span id="selectedYear"></span> <span id="reset">(change year)</span> </span>

來源

2014-02-18 17:43:21

退房小提琴這裏。基本上，您撥打$('#vehicle_year').prepend(year).show();會將該值標記爲打開<html>標籤，因此很難找回標籤。

http://jsfiddle.net/32ta6/12/

<table id="year" class="vehicle_options"> 
    <tbody><tr> 
     <td id="1980">1980</td> 
     <td id="1981">1981</td> 
     <td id="1982">1982</td> 
     <td id="1983">1983</td> 
     <td id="1984">1984</td> 
     <td id="1985">1985</td> 
     <td id="1986">1986</td> 
    </tr> 
    <tr> 
     <td id="1987">1987</td> 
     <td id="1988">1988</td> 
     <td id="1989">1989</td> 
     <td id="1990">1990</td> 
     <td id="1991">1991</td> 
     <td id="1992">1992</td> 
     <td id="1993">1993</td> 
    </tr> 
    <tr> 
     <td id="1994">1994</td> 
     <td id="1995">1995</td> 
     <td id="1996">1996</td> 
     <td id="1997">1997</td> 
     <td id="1998">1998</td> 
     <td id="1999">1999</td> 
     <td id="2000">2000</td> 
    </tr> 
    <tr> 
     <td id="2001">2001</td> 
     <td id="2002">2002</td> 
     <td id="2003">2003</td> 
     <td id="2004">2004</td> 
     <td id="2005">2005</td> 
     <td id="2006">2006</td> 
     <td id="2007">2007</td> 
    </tr> 
    <tr> 
     <td id="2008">2008</td> 
     <td id="2009">2009</td> 
     <td id="2010">2010</td> 
     <td id="2011">2011</td> 
     <td id="2012">2012</td> 
     <td id="2013">2013</td> 
     <td id="2014">2014</td> 
    </tr> 
    <tr> 
     <td id="2015">2015</td> 
    </tr> 
</tbody></table> 


<span id="vehicle_year" style="display: none"><span id="selectedYear"></span> <span id="reset">(change year)</span> </span>

的javascript：

//select year 
$('#year tr td').click(function() { 
    $('#year tr td').removeClass('selected'); 
    var year = $(this).addClass('selected').prop('innerText'); 
    $('#year').hide(); 
    $('#selectedYear').html(year); 
    $('#vehicle_year').show(); 
}); 

$('#reset').click(function() { 
    $('#vehicle_year').hide(); 
    $('#year tr td').removeClass('selected'); 
    $('#year').show(); 
});

來源

2014-02-18 17:25:26 ps2goat

http://jsfiddle.net/32ta6/ - does not work ..當你點擊更改年份原來的一年點擊丟失。 – fyz

那是你的小提琴。我在http://jsfiddle.net/32ta6/6/ – ps2goat

不行 - 我在看你的。 – fyz

$('#year tr td').click(function() { 
    var that = $(this); 
    var year = that.attr("id"); 
    $('#year tr td').removeClass('selected'); 
    that.addClass('selected'); 
    $('#year').hide(); 
    $('#vehicle_year').prepend(year).show(); 
});

這工作：http://jsfiddle.net/32ta6/11/

來源

2014-02-18 17:47:09 marko

如何只選擇table/div中的一個元素？

回答

相關問題