チェックボックスを押すと、on/off という風にテキストが変わるようにしたい

Question

#背景

python+FLASK+HTMLで、アプリを開発しています。
アプリの中に、テーブルへの入力処理があります。

テーブルカラムの中に、ＯＮ／ＯＦＦという二値しかとらないフィールドがあります。
（ＯＮ，ＯＦＦというのは、あくまで例ですが、1,0というバイナリ情報ではなく、あくまで2値をとるテキストです）

#状況

HTMLテーブルのＵＩに関してですが、現状はＯＮ／ＯＦＦを手入力しています。
テキストなので、入力が面倒なので、これをチェックボックスで切り替えできるようにしたいと思います。
（一括で切り替えるボタンも、見出し行につけたい要望もありますが、これは二の次です）

#現状

<td>TABLEの編集属性をONにして、ダイレクトに入力できるソースにしています

ただし、2列目のＯＮというところは、チェックボックスで入力ができるように
したいと考えています。

            <tr>
                <td>アイテム</td>
                <td>ＯＮ</td>
            </tr>

            <tr>
                <td>アイテム</td>
                <td><input type="checkbox">ＯＮ</td>
            </tr>

この後の処理として、TABLE内容をCSVでバックエンドに保存する処理があり、
JSON化して、POSTで送っています。

その際には、TABLEに残った残骸の中に、チェックボックスのHTMLは残さないように
する必要があります。

#質問内容

チェックボックスを押すと、on/off という風にテキストが変わるようにするには、
どういうマクロを組み込めばいいでしょうか？

#追加内容
テーブルの読込、書出のソースを追加しました。
対象となっているテーブルは、CSVデータから生成しており、
更新後には、CSVデータとして排出されます。

テーブルへのチェックボックスは、単なる入力支援として入れたい状況です。
あと実際には、チェックボックス化したいカラムは、動的にデータを読み込んだ後に、
動的に追加という形になります
（出力時には、その内容を消すような処理が必要です）

		var data;
		var rownum = 0;
		$.ajax({
			type: "GET",
			url: '{{csvname}}',
			dataType: "text",
			success: function (response) {
				data = $.csv.toArrays(response);
				generateHtmlTable(data);
				$("#target").tablesorter();
			}
		});
		function generateHtmlTable(data) {
			var html = '<table id="target" align="center" >';
			if (typeof (data[0]) === 'undefined') {
				return null;
			} else {
				$.each(data, function (index, row) {
					//bind header
					if (index == 0) {
						html += '<thead>';
						html += '<tr>';
						$.each(row, function (index, colData) {
							html += '<th label=num>';
							html += colData;
							html += '</th>';
						});
						html += '</tr>';
						html += '</thead>';
						html += '<tbody>';
					} else {
						html += '<tr>';
						$.each(row, function (index, colData) {
							html += '<td>';
							html += colData;
							html += '</td>';
						});
						html += '</tr>';
					}
				});
				html += '</tbody>';
				html += '</table>';
				$('#csv-display').append(html);
				set_number();
				count_num();
			}
		}

function saveing() {
			var data = $('#target').tableToJSON();
			$.ajax({
				type: "POST",
				url: "/csvout" + document.getElementById('fname').value,
				contentType: 'application/json; charset=UTF-8',
				data: JSON.stringify(data),
				dataType: 'json',
				success: function (data) {
					window.location.reload(true);
					console.log(data);
				},
				error: function (error) {
					console.log(data);
					alert("もう一度クリックしてください。");
				},
			});
		}

Comments

[m.ts10806]

なぜ急にマクロの話が？

Answer 1

結局は苦肉の策ですが、下記のようになりました。
JQUERRYは良く分からないので、使っていません。
チェックボックスとテキストを使って、
innerHTMLに突っ込みました。

今のところは「成せば成る」ということを、なんとなく勉強しました。
（本当は、もっといい方法があるのかもしれませんが）

		function select_btn2(columNum){
			var chkstr = "checked='checked'"
			var table = document.getElementById('target');
			for (var i = 0; i < table.rows.length; i++) {
				value = table.rows[i].cells[columNum].innerHTML;
				var str1="";
				if (value=="True"){str1=chkstr;}
				str = '<form style="display: inline">' +  '<input type="checkbox" class ="chk" value="TRUE"'+str1+'>'
				str += value+'</form>'
				table.rows[i].cells[columNum].innerHTML = str;
			}
		}

	function SetColumn2(columNum,value){
		var table = document.getElementById('target');
			for (var i = 1; i < table.rows.length; i++) {
				var target = table.rows[i].cells[columNum];
				target.children[0].children[0].nextSibling.textContent  = value; 
				target.children[0].children[0].checked =  parseStrToBoolean(value);
				}
			}

    function parseStrToBoolean(str) {
        return (str == 'True') ? true : false;
    }

Answer 2

チェックボックスの後ろにダミーのspanをおいて
beforeやafterで処理してください

Comments

[yambejp]

<style>
.chk:checked+span::before{content:"on"}
.chk:not(:checked)+span::before{content:"off"}
</style>
<input type="checkbox" class="chk"><span></span>
<input type="checkbox" class="chk" checked><span></span>

[yuujiMotoki]

ありがとうございます。

CONTENTで表示されるテキスト(ON,OFF)というのは、実際にはHTML上のテーブル文字列である
<td>ｏｎ</td>の中身を直接変更させることはできますでしょうか？

あとCSVデータを読み込んだ後に生成される<td>on</td>で読み込まれたような、動的なHTMLテーブルに対して、HTMLタグ自信を、<INPUT>～</span/>というタグに、置換させるような前処理が、必要になりますが、そのコードが書けないので困っているところです。
（そのあとJSONで出力する際にも、いったん<input>タグを<td>タグに置換するような処理も必要になり、同じようにコードが書けない状態です。

質問内容がやや変わりましたが、そこをクリアすれば道が開けそうな気がします。

[yambejp]

状況がよくわかりませんがjsで直接書き換えたいならこう
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.chk').forEach(x=>{
x.addEventListener('change',()=>{
x.nextSibling.textContent=x.checked?"ＯＮ":"ＯＦＦ";
});
});
});
</script>
<table>
<tr>
<td>アイテム</td>
<td><input type="checkbox" class="chk" checked>ＯＮ</td>
<td><input type="checkbox" class="chk">ＯＦＦ</td>
</tr>
</table>