1

我在这里有一个表格中的项目列表。每个项目的右侧都有一个“选择”按钮。每当用户单击“选择”按钮时，按钮左侧的项目或文本应显示在span. 当我单击“选择”按钮时会发生什么，所有项目都显示在span.

查看实际场景：http: //jsfiddle.net/HnAnu/

我的代码如下：

<html>
<head>
 <script type="text/javascript" src="jquery.1.7.2.min.js"></script>
 <script type="text/javascript">
  $(function() {
   $(".btnSelectItem").click(function () {
    $("#spanItemDescription").html("<u>"+$(".tdItemDescription").text()+"</u>");
   });
  });
 </script>
</head>
<body>
 <div>
  <span>Item: </span>
  <span id="spanItemDescription">____________________________</span>
 </div>
 <table border=1>
  <tr>
   <td class="tdItemDescription">Shin Guard Small</td>
   <td><input type="button" class="btnSelectItem" value="Select"/></td>
  </tr>

  <tr>
   <td class="tdItemDescription">Shin Guard Medium</td>
   <td><input type="button" class="btnSelectItem" value="Select"/></td>
  </tr>

  <tr>
   <td class="tdItemDescription">Shin Guard Large</td>
   <td><input type="button" class="btnSelectItem" value="Select"/></td>
  </tr>
 </table>
</body>
</html>

请帮我。提前致谢。

4

3 回答 3

2

请试试这个

  $(function() {
            $(".btnSelectItem").click(function () {
                $("#spanItemDescription").html("<u>"+$(this).parent('td').siblings('.tdItemDescription').text()+"</u>");
            });
        });

小提琴演示

于 2012-06-26T03:50:32.397 回答
2

你只需要得到正确的 td

$("#spanItemDescription").html("<u>"+$(this).parent('td').prev(".tdItemDescription").text()+"</u>");

小提琴

于 2012-06-26T03:50:41.643 回答
1 
$(function() {
        $(".btnSelectItem").click(function () {
            var text = $(this).parent().prev().text(); //the previous node of the parent of button
            $("#spanItemDescription").html("<u>"+text+"</u>");
        });
    });

这有效:)

于 2012-06-26T03:55:41.933 回答