Javascript Tableをクリックした際に選択した行の色を変えたい

Question

表題の件で質問させてください。

WEBアプリにHTMLのTableを配置し、選択した行の色を変えたいと思っています。

件数	日付	入力者
1	2019-01-20	Aさん
2	2019-01-21	Bさん

1行目をクリックすると1行の背景色が変わり
2行目をクリックすると1行目の背景色はリセットされ2行目の背景色が変わる
1行目をクリックすると2行目の背景色はリセットされ1行目の背景色が変わる
というように（分かりにくくてすいません）クリックされた行のみ背景色を変え、それ以外の行の背景色はデフォルトにしたいです

同様のケースを調べながら以下のサンプルを作ってみたのですが、1行目をクリックして色が変わるのは良いのですが、2行目をクリックしたときは1行目の背景色は変更されたままでクリックのたびに色が変わるという目的の動作が出来ていません。

クリックの度に色を切り替えるというのはどのように考えて作ればよいでしょうか
cssで個別に指定するのかと考えたのですが行の数は可変するので各行にidを付けれずどのようにすればよいか行き詰ってしまいました
初歩的な質問で申し訳ありませんがアドバイス頂きたいです
宜しくお願い致します

<table id="test">
  <tr>
    <th>件数</th><th>日付</th><th>入力者</th>
  </tr>
  <tr>
    <td>1</td><td>2019-01-20</td><td>Aさん</td>
  </tr>
  <tr>
    <td>2</td><td>2019-01-21</td><td>Bさん</td>
  </tr>
</table>

td {
	background-color: #FFFF;
}
.colorchange {
	background-color: red;
}

$( function() {
	$( '#test tr' ).on( 'click', function() {
			$( this ).children().not( 'th' ).toggleClass( 'colorchange' );
	} );
} );

質問追記---------------------------------------------------------

回答頂いた方ありがとうございます。
頂いたコードはjsfiddleで目的の動作を確認致しました。
ただ、自分の実際の開発環境では動作しませんでした。

自分なりに調査した結果、HTMLファイルに直接記入したものは上手く動作して、javascriptで処理の中で作成したものでは動作しませんでした。
このようなケースは稀なのかもしれませんが、当方知識が浅く、どのように調べてよいかもわからず行き詰っています。

自分の作成しているアプリは質問欄の表でいう以下のtbodyにあたる部分をjavascriptで生成しています。

1	2019-01-20	Aさん
2	2019-01-21	Bさん

規模が大きいので全文掲載出来ないのですが、以下がHTMLファイルのテーブルタグの部分

<table id="datatable"class="table is-bordered is-hoverable is-fullwidth">
    <thead>
        <tr class="is-selected" style="background-color: rgb(112, 112, 218)">
            <th>件数</th> <th>入力時間</th>
        </tr>
    </thead>
    <tbody id="tablebody">

    </tbody>
</table>

以下がjsファイルでコメント記入している部分がHTMLを生成している部分になります
$('#tablebody').append( tr );の部分です
このように作成したHTMLでは所望の動作をしません
選択した箇所の色の変更が適応されるのはHTMLで記載した<thead>内の<tr>だけでした

//table 内容作成
function dataTable(tabelDate) {
            if (tabelDate.length > 0) {
                for (var i = 0; i < tabelDate.length; i++) {
                    var lenCount = i + 1;
                    var doc = tabelDate[i];
                    var dateObj = [new Date(doc.date)];
                    var strDate = dateObj.toLocaleString()
                    var sliceStrDate = strDate.slice(0, 18)
                    var tr = `<tr><td> ${lenCount} </td><td> ${sliceStrDate} </td></tr>`; //HTMLタグを生成している部分
                    console.log(tr)
                    $('#tablebody').append( tr );
                }
                }
        },
        error: function () {
            console.log('error');
        }
    });
};

以下のようにjavascriptで生成されるものをあらかじめHTMLファイルに記載しておくとどの行を選択しても色が変わり所望の動作をします

<table id="datatable"class="table is-bordered is-hoverable is-fullwidth">

<thead>
	<tr>
	<th>件数</th> <th>入力時間</th>
	</tr>
</thead>

<tbody id="tbody">
	<tr onClick="click('Tue Jan 20 2019 09:07:00 GMT+0900 (日本標準時)')">
		<td> 1 </td>
		<td> 2019/1/15 9:07:00 </td>
	</tr>

	<tr onClick="click('Tue Jan 20 2019 11:31:00 GMT+0900 (日本標準時)')">
		<td> 2 </td>
		<td> 2019/1/15 11:31:00 </td>
	</tr>
	
	<tr onClick="click('Tue Jan 20 2019 16:04:03 GMT+0900 (日本標準時)')">
		<td> 3 </td>
		<td> 2019/1/15 16:04:03 </td>
	</tr>
	
</tbody>
</table>

自分で調べて分かったのが上記の部分までで何が原因でどう対処すればよいのか分からず悩んでいます。
説明が分かりにくい部分があるかと思いますがどのような対処法が考えられるかアドバイス頂きたいです。
重ねて質問して申し訳ありませんが宜しくお願い致します。

Answer 1

$( function() {
    $( '#test tr' ).on( 'click', function() {
       $('.colorchange').removeClass('colorchange');
       $(this).children('td').addClass('colorchange');
    })
});

最初に全消去すればよいです

追記への回答

jqueryオブジェクトは実行した時点のHTMLから作成されます。
よって、$( '#test tr' )は、このメソッドを実行した時点のHTMLから作成されます。

要するに、javascirptで上記の条件('#test tr')に合う要素を、後から作ってもclickイベントは反応しないという事です。

このような場合JQuery.onのselector引数を使います。

    $( '#test' ).on( 'click', 'tr', function() {
       $('.colorchange').removeClass('colorchange');
       $(this).children('td').addClass('colorchange');
    })

selector引数の詳しい解説は面倒なのでご自身で調べて下さい。

Comments

[---stax---]

回答ありがとうございます。
回答頂いたコードで所望の動作を確認出来ました。
丁寧な回答ありがとうございます。

重ねて申し訳ないのですが質問を追記させて頂きました。
お手数おかけしますが宜しくお願い致します。

[---stax---]

回答ありがとうございます。
返答遅れて申し訳ございません。
頂いたコードで目的の動作が確認出来ました。
行き詰っていたので本当に助かりました。
js側で新たに追加されたDOMに影響を与えないことを初めて知りました。
今回詰まったところの理解とjqueryの学習も進めていこうと思います。
ありがとうございました。

Answer 2

toggleしたいならこう

<style>
tr{
  background-color: white;
}
tr.colorchange {
  background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#test tbody tr').on('click',function(){
    $(this).toggleClass('colorchange').siblings().removeClass('colorchange');
  });
});
</script>
<table id="test">
<thead>
<tr>
<th>件数</th><th>日付</th><th>入力者</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2019-01-20</td><td>Aさん</td>
</tr>
<tr>
<td>2</td><td>2019-01-21</td><td>Bさん</td>
</tr>
<tr>
<td>3</td><td>2019-01-22</td><td>Cさん</td>
</tr>
</tbody>
</table>

元のスタイルシートはtrとtd別々に背景色を換えているのでNG
またthを見て判断するのではなくヘッダはtheadを利用してください

Comments

[---stax---]

回答ありがとうございます。
回答頂いたコードで所望の動作を確認出来ました。
丁寧な回答ありがとうございます。

重ねて申し訳ないのですが質問を追記させて頂きました。
お手数おかけしますが宜しくお願い致します。