Home/ Questions/Q 8130423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T08:42:15+00:00

I have here a list of items in a table. Each item has a

  • 0

I have here a list of items in a table. Each item has a “Select” button on the right. Whenever the user clicks the “Select” button the item or text on the left of the button should display on the span. What happens is when I click the “Select” button all the items is being displayed on the span.

To see the actual scenario: http://jsfiddle.net/HnAnu/

My code is down below: 

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

Please help me. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Please try this

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

    ​FIDDLE DEMO

    • 0