JSFiddle - React, Tailwind, and code Playground
HTML
<div id="change_form" class="container">
<div class="row">
<div class="col col-xs-3">
ご注文の商品
</div>
<div class="col col-xs-8">
<span th:text="${order['注文asString']}"></span>
</div>
</div>
<a th:href="${'./SearchOrders?searchTerm='+tld}">トップレベルドメインから検索</a><br/>
<a th:href="${'./SearchOrders?searchTerm='+domain}">ドメインから検索</a><br/>
<a th:href="${'./SearchOrders?searchTerm='+order['メールアドレス']}">メールアドレスから検索</a><br/>
<div class="row"><div class="text-r col col-xs-3">帳票コード</div><div class="col col-xs-4"><span th:text="${order['帳票コード']}"></span></div></div>
<div class="row"><div class="text-r col col-xs-3"><label for="顧客番号">顧客番号</label></div><div class="col col-xs-8"><form action="./UpdateOrder" method="POST"><input style="width:80%" type="text" th:name="value" id="顧客番号" th:value="${order['顧客番号']}"/><input type="hidden" th:name="column" th:value="顧客番号"/><input type="hidden" th:name="formNo" th:value="${order['帳票コード']}"/><input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/><input type="submit" value="更新"/></form></div></div>
<div class="row"><div class="text-r col col-xs-3"><label for="見積番号">見積番号</label></div><div class="col col-xs-8"><form action="./UpdateOrder" method="POST"><input style="width:80%" type="text" th:name="value" id="見積番号" th:value="${order['見積番号']}"/><input type="hidden" th:name="column" th:value="見積番号"/><input type="hidden" th:name="formNo" th:value="${order['帳票コード']}"/><input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/><input type="submit" value="更新"/></form></div></div>
<div class="row"><div class="text-r col col-xs-3"><label for="発注番号">発注番号</label></div><div class="col col-xs-8"><form action="./UpdateOrder" method="POST"><input style="width:80%" type="text" th:name="value" id="発注番号" th:value="${order['発注番号']}"/><input type="hidden" th:name="column" th:value="発注番号"/><input type="hidden" th:name="formNo"...
JavaScript
document.addEventListener("input", function(e){markAsEdited(e)});
function markAsEdited(e) {
var t = e.target;
var parent = t.parentNode;
t.style.backgroundColor = "yellow";
var elements = document.querySelectorAll("#change_form form");
for (var i = 0; i < elements.length; i++) {
if(elements !== parent) {
for (var i = 0; i < parent.length; i++) {
parent.querySelectorAll("input").disabled = true;
}
}
}
}