我有一个程序生成的表，列出了数据库中的信息。你可以在这里看到：
http://www.homeducate.me/cgi-bin/browseTutors.cgi?Lui=en&countryCode=MO
对于一段文本，如果它很长，我将列出文本的缩短版本。现在，我想在用户单击该行以展开下面的其他行时将其切换到较长的版本。
我的表有一组重复的部分，如下所示：

<tr class="header">
 //some stuff
<script>
  var approachTxt1 = "Shortened version of the text...";
  var approachFullTxt1 = "Full length version of the text to be displayed.";
</script>

<td><img src="an_image.png"><span id="approach1">Shortened version of the text...</span><img src="another_image.png"></td>

//some more stuff
</tr>
<tr>Some more rows of stuff</tr>

然后我使用下面的脚本来（1）最初折叠每个标题行下的所有行，（2）当单击标题行时切换它们以再次显示（3）如果用户单击未隐藏的行则重定向到URL，以及（4）当在表上时将指针更改为鼠标。一切都很顺利。

<script>

    $('#listTutors .header').each(function () {
        $(this).nextUntil('tr.header').toggle();
    });

   $('.header').click(function () {
    var $this = $(this);
      $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
      });
 
    });
  
    $("tr:not('.header')").click(function () {
      top.window.location.href="http://www.homeducate.me/cgi-bin/createAccountForm.cgi?Lui=en";
    });

    $('html,table').css('cursor','pointer');

</script>

现在我想做的是，当用户单击以展开该部分时，将文本的缩短版本切换为全文，然后当用户再次单击以隐藏该部分时，再次将其切换回缩短形式。我一直在努力

$(this).next('span').html($(this).next('span').html() == approachTxt1 ? approachFullTxt1 : approachTxt1);

但是我得到了“undefined不是函数”和“意外的字符串”错误。它显然没有拿起跨度后，目前的标题。
另外，我正在努力思考如何为我的每一组表行执行此更改（例如。根据用户选取的标题行切换出适当的字符串）。我已经在这个问题上挠头太久了：（并且真的很感激任何指导。