Javascript 如何仅选择表/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:

---

jsFIDLE:

在这里查看小提琴。基本上，您可以调用$vehicle\u year.prependyar.show；将值放在打开的标记中，在这些标记中检索起来非常困难

---

在这里，它类似于ps2goat，但删除了不需要的代码，并修复了当年被删除的代码

---

这很有效：

我没有投你反对票。但是，您可以通过在下拉列表中添加年份来简化您的生活，即…此实现有什么问题？你的HTMLBTW中没有一个div。年度div。看看小提琴。它不允许您更改年份。@War10ck select不提供我在此所追求的用户体验。请在您的OP中包含相关的HTML标记。我们不能依赖演示来实现此目的。-不起作用。。单击“更改年份”时，原始年份单击丢失。好的，我更新了示例。在上一个示例中，DOM元素正在移动。我将其更改为仅将innerText分配给year变量。

<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>

<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>

//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();
});

//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>

$('#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();
});