

tablesorter + metadataプラグインを使用して、ソート可能なテーブルを作成しています。  
ボタンのラベルに対応した値によってソートしたいのですが、ボタンを押した際にその値を変更した後にソートを行っても、ソート順が正しく表示されません。

どのようにすれば正しくボタンのラベルに対応した値でソートできるようになるでしょうか？

[code]

    <!DOCTYPE html>
    <html>
        <head>
            <script src="js/jquery.js"></script>
            <script src="js/jquery.tablesorter.js"></script>
            <script src="js/jquery.tablesorter.widgets.js"></script>
            <script src="js/jquery.metadata.js"></script>
            <script>
                $(function() {
                    $('#table').tablesorter({
                        debug: true
                    });
                    $('button').click(function() {
                        if ($(this).text() == "A") {
                            $(this).text("B").parent().removeClass("{sortValue:1}").addClass("{sortValue:2}");
                        } else {
                            $(this).text("A").parent().removeClass("{sortValue:2}").addClass("{sortValue:1}");
                        }
                        $('#table').trigger("update");
                    });
                });
            </script>
        </head>
        <body>
            <table id="table" class="tablesorter">
                <thead>
                    <tr><th class="{sorter:'metadata'}">ボタン</th><th>値</th></tr>
                </thead>
                <tbody>
                    <tr><td class="{sortValue:1}"><button>A</button></td><td>1</td></tr>
                    <tr><td class="{sortValue:2}"><button>B</button></td><td>2</td></tr>
                    <tr><td class="{sortValue:2}"><button>B</button></td><td>3</td></tr>
                    <tr><td class="{sortValue:2}"><button>B</button></td><td>4</td></tr>
                    <tr><td class="{sortValue:1}"><button>A</button></td><td>5</td></tr>
                </tbody>
            </table>
        </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-05-20T04:37:49.100
25018
2016-10-18T10:17:58.223
15578
question
javascript html jquery
tablesorterでボタンの値順でソートしたい


このようになれば、問題ないになります

[code]

    $(function() {
    $('.tablesorter').tablesorter({
     debug: false
    });
    });
    
    function btClick(bt){
    if (bt.textContent == "A") {
     bt.parentElement.outerHTML='<td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td>';
    } else {
     bt.parentElement.outerHTML='<td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td>';
    }
    $('.tablesorter').trigger("update");
    }
[/code]

[code]

    <!DOCTYPE html>
    <html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/jquery.tablesorter.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/jquery.tablesorter.widgets.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/extras/jquery.metadata.min.js"></script>
    </head>
    <body>
     <table id="table" class="tablesorter">
      <thead>
       <tr><th class="{sorter:'metadata'}">ボタン</th><th>値</th></tr>
      </thead>
      <tbody>
       <tr><td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td><td>1</td></tr>
       <tr><td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td><td>2</td></tr>
       <tr><td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td><td>3</td></tr>
       <tr><td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td><td>4</td></tr>
       <tr><td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td><td>5</td></tr>
      </tbody>
     </table>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2016-06-06T05:27:11.540
26495
2016-06-06T05:27:11.540
14019
25018
answer