如何在table/div中只选择一个元素

目标：

从列表表中选择一年
具有更改年份的能力(如果意外点击)
重新加载所有年份
选择其他年份

jQuery:(这是我被黑客入侵的失败尝试；请建议正确的实现)

$('#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/

这里，它类似于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>

在这里查看小提琴。基本上，对$('#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();
});

$('#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/

相关内容

最新更新

热门标签：