一、查询数据库数据，A列数据如果等于前端div中的值，那么将div中的值给其赋值为对应数据库中B列的值
如下案例：以第一个为例，如果id为append1，并且此id等于满足条件的数据库中colum_name列中的append1，就将id对应的div下的第一个子div中的值更改为数据库中满足条件的colum_name对应的remark的值"简称"
（如下图，如果id（红色方框）等于数据库column_name（蓝色方框）中的任何一项，那么子div中的值（绿色方框）就更改为数据库remark的值（紫色方框）
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的值为customers的以及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名字更改为追加3，追加4）
二、对照一，将表格中的th，td同时进行隐藏与显示
参照一进行更改，思路：将id更改为class，直接对th中的内容进行更改，这里也将指定的id范围更改为以“append”开头。
HTML代码
注：这里用到的th和td都需要给指定class的值
①th内容
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名字更改为测试111，测试333）
