Html 通过单击行折叠展开tableRow

我发现一个jfiddle，单击文本可折叠/展开行：

Html:

 <table border="1">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
            <td><a href="#" id="show_1">Show Extra</a></td>
        </tr>
        <tr>
            <td colspan="5">
                <div id="extra_1" style="display: none;">
                    <br>hidden row
                    <br>hidden row
                    <br>hidden row
                </div>
            </td>
        </tr>
    </table>

但现在我想单击行展开，而不是单击Show Extra。 但我想不出是怎么回事

谁能帮帮我吗

谢谢你看这把小提琴

$（函数（）{
$（[a[id^=show_u3;]）。单击（函数（事件）{
$（“#额外的”+$（this）.attr（'id'）.substr（5））.slideToggle（“慢”）；
event.preventDefault（）；
})
$（'.row'）。单击（函数（）{
$（“额外1”）。滑动切换（“慢速”）；
event.preventDefault（）；
}); 
}); 

第1单元
第2单元
第三单元
第4单元

隐藏行

隐藏行

隐藏行

该死！谢谢你的快速回答！就这样！欢迎你可以投票，你也有足够的声誉@是的，现在我可以了！我赢得了10%的声誉。投票完毕！谢谢

$("a[id^=show_]").click(function(event) {
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
    event.preventDefault();
})