javascript - javascriptとjqueryを使用して要素内のテキストをどのように再配置しますか

Question

クラス「名前」を持つすべての要素を選択しようとしていますが、1 つのラジオ ボタンをクリックすると、姓と名が入れ替わります。ハンクス、トム || トム、ハンクス。これが私がこれまでに持っているものです：

HTML:

<h1>Address Book</h1>

<p>Show Names as:</p>
<input name="lastfirst" value="last" type="radio">First, Last
<input name="firstfirst" value="first" type="radio">Last, First
<div>
    <table <thead="">
        <tbody>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>9001</td>
                <td class="name">Tom Hanks,</td>
                <td>tomhanks@moviestars.com</td>
            </tr>
            <tr>
                <td>9002</td>
                <td class="name">Bruce Willis,</td>
                <td>brucewillis@moviestars.com</td>
            </tr>
            <tr>
                <td>9003</td>
                <td class="name">Jim Carrey,</td>
                <td>jimcarrey@moviestars.com</td>
            </tr>
            <tr>
                <td>9004</td>
                <td class="name">Tom Cruise,</td>
                <td>tomcruise@moviestars.com</td>
            </tr>
            <script>

            </script>
        </tbody>
    </table>
</div>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./webassets/style.css" media="screen" type="text/css">
    <h1>Company Staff List</h1>

<div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>9001</td>
                <td>Tom Hanks,</td>
            </tr>
            <tr>
                <td>9002</td>
                <td>Bruce Willis,</td>
            </tr>
            <tr>
                <td>9003</td>
                <td>Jim Carrey,</td>
            </tr>
            <tr>
                <td>9004</td>
                <td>Tom Cruise,</td>
            </tr>
        </tbody>
    </table>
</div>

これが私のjqueryです。要素を選択する以外に、これを行う方法がわからないため、.hide() のフィラーを使用しました。いくつかのヒントが役立ちます。姓と名の区切り方がわかりません。姓と名を単純に変数に入れ替える方法を理解できれば、残りは間違いなく理解できます。

$(document).ready(function(){
  $("input[name='lastfirst']").click(function(){
    $(".name").hide();
  });

  $("input[name='firstfirst']").click(function(){
    $(".name").hide();
  });
});