1. データベース データをクエリします。列 A のデータがフロントエンド div の値と等しい場合は、div の値を、対応するデータベースの列 B の値に割り当てます。
次のケース: 最初のものを例に挙げます。ID が append1 で、この ID が条件を満たすデータベースの colum_name 列の append1 と等しい場合、対応する div の下の最初のサブ div の値を変更します。 idにデータベース内の値 条件を満たすcolum_nameに対応するコメントの値「略称」
(以下の図に示すように、ID (赤いボックス) がデータベースの列名(青いボックス)内の項目と等しい場合、サブディビジョン(緑のボックス)の値がデータベースの注釈(紫色の箱）
HTMLコード
<div class="text-nav-1 " id="append1">
<div>append1</div>
<input type="text" autocomplete="off" name="append1" value="<?= $_POST['append1'] ?>" />
</div>
<div class="text-nav-1 " id="append2">
<div>append2</div>
<input type="text" autocomplete="off" name="append2" value="<?= $_POST['append2'] ?>" />
</div>
<div class="text-nav-1 " id="append3">
<div>append3</div>
<input type="text" autocomplete="off" name="append3" value="<?= $_POST['append3'] ?>" />
</div>
<div class="text-nav-1 " id="append4">
<div>append4</div>
<input type="text" autocomplete="off" name="append4" value="<?= $_POST['append4'] ?>" />
</div>
<div class="text-nav-1 " id="append5">
<div>append5</div>
<input type="text" autocomplete="off" name="append5" value="<?= $_POST['append5'] ?>" />
</div>
コード
上の図のデータベースとここの SQL ステートメントからわかるように、table_name の値のみが customer で、is_show の値は Y)
<script type="text/javascript">
<!-- 刚进入页面执行方法 -->
window.onload=function(){
//通过php获取到数据库数据
<?php
$sql1 = "SELECT * FROM attribute where is_show = 'Y'and table_name = 'customers'";
$result1 = DB_query($sql1, $db);
// 检查查询结果是否为空
if (DB_num_rows($result1) > 0) {
// 初始化一个空数组来存储查询结果
$data = array();
// 遍历查询结果并将每行数据存入数组中
while ($row = DB_fetch_array($result1)) {
$data[] = $row;
}
} else {
echo "没有结果";
}
?>
//给数据库输出的数组赋值
var data = <?php echo json_encode($data); ?>;
// 获取 HTML 中所有具有 id 属性的元素
var elements = document.querySelectorAll('[id]');
// 定义需要进行判断的id列表
var idsToCheck = ['append1', 'append2', 'append3', 'append4', 'append5'];
// 遍历 HTML 元素
elements.forEach(function(element) {
// 获取当前元素的 id
var id = element.id;
// 获取当前 div 元素的第一个子 div 元素
var firstChildDiv = element.querySelector('div');
// 检查第一个子 div 元素是否存在
if (firstChildDiv) {
// 遍历数组中的每一行
data.forEach(function(row) {
// 获取当前行的 column_name 值和 remark 值
var column_name = row.column_name;
var remark = row.remark;
// 判断 column_name 值是否与当前元素的 id 相同
if (column_name === id) {
// 修改第一个子 div 元素的文本内容为 remark 值
firstChildDiv.textContent = remark;
}
});
}
// 检查当前id是否在需要进行判断的id列表中
if (idsToCheck.includes(id)) {
var matchFound = false;
// 遍历数组中的每一行
data.forEach(function(row) {
// 获取当前行的 column_name 值
var column_name = row.column_name;
// 判断 column_name 值是否与当前元素的 id 相同
if (column_name === id) {
matchFound = true;
}
});
// 根据匹配结果执行相应的逻辑
if (!matchFound) {
// console.log('column_name 和 id 相同');
// 可以在这里执行其他操作，例如修改元素的样式或值
element.style.display = 'none';
}
}
});
}
</script>結果が表示されます（append1、append2、append5が非表示になり、表示されているappend3、append4の名前がappend3、append4に変更されます）
2. 1と比較して、テーブル内のthとtdを同時に非表示および表示します
変更するには 1 を参照してください。アイデア: ID をクラスに変更し、その内容を直接変更します。ここでは、指定された ID 範囲も「追加」で始まるように変更します。
HTMLコード
注: ここで使用される th と td はどちらも class の値を指定する必要があります
①内容
echo ' <tr>
<th class="ascending" width = 150>' . _('客户简称') . '</th>
<th class="ascending"width = 250>' . _('客户全称') . '</th>
<th class="ascending"width = 150>' . _('联系人') . '</th>
<th class="ascending"width = 150>' . _('电话') . '</th>
<th class="ascending"width = 200>' . _('邮箱') . '</th>
<th class="ascending"width = 200>' . _('传真') . '</th>
<th class="ascending" >' . _('税别') . '</th>
<th >' . _('是否生效') . '</th>
<th class="append1">' . _('扩展1') . '</th>
<th class="append2">' . _('扩展2') . '</th>
<th class="append3">' . _('扩展3') . '</th>
<th class="append4">' . _('扩展4') . '</th>
<th class="append5">' . _('扩展5') . '</th>
</tr>
';②TDの内容
echo ' <td><a href="' . $RootPath . '/AddCustomer2.php?UpdateCustomerCode=' . $myrow['customer_code'] . '">' . $myrow['customer_code'] . '</td>
<td>' . $myrow['customer_name'] . '</td>
<td>' . $myrow['Customer_contacts'] . '</td>
<td>' . $myrow['contacts_phone'] . '</td>
<td>' . $myrow['contacts_mail'] . '</td>
<td>' . $myrow['contacts_fax'] . '</td>
<td>' . $myrow['tax_name'] . '</td>
<td>' . $myrow['enable_flag'] . '</td>
<td class="append1">' . $myrow['append1'] . '</td>
<td class="append2">' . $myrow['append2'] . '</td>
<td class="append3">' . $myrow['append3'] . '</td>
<td class="append4">' . $myrow['append4'] . '</td>
<td class="append5">' . $myrow['append5'] . '</td>
';ファンクションコード
<script type="text/javascript">
window.onload=function(){
<?php
$sql1 = "SELECT * FROM attribute where is_show = 'Y'and table_name = 'customers'";
$result1 = DB_query($sql1, $db);
// 检查查询结果是否为空
if (DB_num_rows($result1) > 0) {
// 初始化一个空数组来存储查询结果
$data = array();
// 遍历查询结果并将每行数据存入数组中
while ($row = DB_fetch_array($result1)) {
$data[] = $row;
}
} else {
echo "没有结果";
}
?>
// 给数据库输出的数组赋值
var data = <?php echo json_encode($data); ?>;
// 获取 HTML 中所有具有 class 属性的元素
var elements = document.querySelectorAll('[class]');
// 遍历 HTML 元素
elements.forEach(function(element) {
//更改内容
//选择所有标签名为 <th>，并且类名以 "append" 开头的元素。（只是更改th的内容）
var thElements = document.querySelectorAll('th[class^="append"]');
data.forEach(function(row) {
//赋值
var column_name = row.column_name;
var remark = row.remark;
// 遍历具有特定类名的 <th> 元素
thElements.forEach(function(element) {
if (element.classList.contains(column_name)) {
// 将备注值赋给匹配的 <th> 元素的文本内容
element.textContent = remark;
}
});
});
//隐藏元素（th和td都要进行隐藏）
// 获取当前元素的 class 名称
var className = element.className;
// 检查当前类名是否以 "append" 开头
if (className.startsWith("append")) {
var matchFound = false;
// 遍历数组中的每一行
data.forEach(function(row) {
// 获取当前行的 column_name 值
var column_name = row.column_name;
// 判断 column_name 值是否与当前元素的 class 相同
if (column_name === className) {
matchFound = true;
}
});
// 根据匹配结果执行相应的逻辑
if (!matchFound) {
// console.log('column_name 和 class 相同');
// 可以在这里执行其他操作，例如修改元素的样式或值
element.style.display = 'none';
}
}
});
}
</script>結果が表示されます（append2、append4、append5が非表示になり、表示されているappend1、append3の名前がtest 111、test 333に変更されます）
