Question

I have a table with 4 cols:

<table id="myTable">
  <th>
    <td> A </td>
    <td> B </td>
    <td> C </td>
    <td> D </td>
  </th>
  <tr>
    <td> 
      <span>A-1</span>  <span>A-3</span>  <span>A-5</span>
    </td>
    <td> 
      <span>B-2</span> <span>B-3</span>
    </td>
    <td> 
      <span>C-3</span>   <span>C-4</span>   <span>C-7</span>
    </td>
    <td> 
      <span>D-1</span>
    </td>
  </tr>
</table>

I have a dropdown with A,B,C and D with a change handler (A=1, B=2, etc):

 @Html.DropDownListFor(model => model.TypeID, new SelectList(Model.Types, "Key", "Value", Model.TypeID))

  $('#myTable').change(function () {
    var type = $(this).val();
     if (type == 1) {
        var tr = $('#current tr')[0];
        var td = tr.cells[0].innerHTML;
        var last = $(td).find(':last-child');
        /// how do I get the contents of the last span???
     } else if ( type == 2 ) {
        ...
     }

  });

Finally, a textbox:

  @Html.TextBoxFor(model => model.next)

When the user pics a selection from the drop down, I want to put the appropriate “next” value based on what’s in the last span in the appropritate table cell.
I can’t seem to figure out how to get the last , and extract the value.

Answer 1

$('#myTable').change(function () {
    var type = +$(this).val();
     if (type === 1) {
        var tr = $('#current tr');
        var td = tr.find('td:eq(0)');
        var last = td.find('span:last');
        var contents = last.html();
     } else if ( type == 2 ) {
        ...
     }

  });