javascript - 使用 JavaScript 禁用列？
问题描述
我想用 JS 禁用我的桌子上的一列，使用一个按钮。
我在互联网上寻找解决方案，但没有找到。是不是因为我的表是JS创建的？
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<title>Bootstrap Table - Filter control</title>
<link rel='stylesheet' href='css/bootstrap.css'>
<link rel='stylesheet' href='css/bootstrap-table.css'>
<link rel='stylesheet' href='css/bootstrap-editable.css'>
<link rel="stylesheet" href="css/style.css">
<script src='js/jquery.js'></script>
<script src='js/bootstrap.js'></script>
<script src='js/bootstrap-table.js'></script>
<script src='js/bootstrap-table-editable.js'></script>
<script src='js/bootstrap-table-export.js'></script>
<script src='js/tableExport.js'></script>
<script src='js/bootstrap-table-filter-control.js'></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Table</h1>
<p> Mémo pour les options du Bootstrap Table : <a href="http://bootstrap-table.wenzhixin.net.cn/documentation/">Bootstrap Table Documentation</a></p>
<p>Eléments de Bootstrap Table utilisés : <a href="http://jsfiddle.net/wenyi/e3nk137y/3178/">Data Checkbox</a>, pour cocher les éléments à sélectionner, <a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/filter-control.html">extension Filter control</a>, pour les filtres via les colonnes, <a href="https://github.com/kayalshri/tableExport.jquery.plugin">extension Data export</a> pour exporter</p>
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table id="table" class="table"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-show-export="true"
data-click-to-select="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th id="column-a" style="visibility: hidden; display: none;">1</th>
<th data-field="state" data-checkbox="true"></th>
<th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th>
<th data-field="date" data-filter-control="select" data-sortable="true">Date</th>
<th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th>
<th data-field="note" data-sortable="true">Note</th>
</tr>
</thead>
<tbody id="tbody">
<div id="tabs1" class="tabs">
</div>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/tableaujs.js"></script>
<button type="button" data-column="#column-a" id="bouton">Hide/show 1st</button>
<script>
$(document).on("click", "[data-column]", function () {
var button = $(this),
header = $(button.data("column")),
table = header.closest("table"),
index = header.index() + 1,
selector = "tbody div tr td:nth-child(" + index + ")",
column = table.find(selector).add(header);
alert(button.data("column") + " index" + index);
// selector = "tbody div tr td:nth-child(1)";
// column = table.find(selector).add(header);
column.toggleClass("hidden");
});
</script>
</body>
</html>
var utilisateur = [ // donnée du tableau
{
id: 1,
checked: false,
prenom: "Dolores",
date: "Fermière",
examen: "host",
note: "ww.dolores@gmail.com"
},
{
id: 2,
checked: true,
prenom: "Bernard",
date: "Robopsycologue",
examen: "abdel",
note: "ww.bernard@gmail.com"
}
];
for (let i = 0; i < 100; i++) {
var row = document.createElement("tr"); // créer le tableau
var atr2 = document.createAttribute("id");
atr2.value = utilisateur[i].id;
row.setAttributeNode(atr2);
var cell0 = document.createElement("td");
// var atr1 = document.createAttribute("id");
// atr1.value = utilisateur[i].id;
// cell0.setAttributeNode(atr1);
var cell1 = document.createElement("td"); // créer l'élément
var atr = document.createAttribute("class"); // créer l'attribut
atr.value = "bs-checkbox";
cell1.setAttributeNode(atr);
var para = document.createElement("input");
var para1 = document.createAttribute("data-index");
var para2 = document.createAttribute("name");
var para3 = document.createAttribute("type");
para1.value = "0";
para2.value = "btSelectItem";
para3.value = "checkbox";
para.setAttributeNode(para1);
para.setAttributeNode(para2);
para.setAttributeNode(para3)
cell1.appendChild(para);
// var cell1 = '<td class="bs-checkbox"></td>'
//alert(cell1).innerText;
var cell2 = document.createElement("td"); // créer l'élément
var cell3 = document.createElement("td");
var cell4 = document.createElement("td");
var cell5 = document.createElement("td");
var cell6 = document.createElement("td");
var cell7 = document.createElement("td");
var cell8 = document.createElement("td");
cell0.innerText = utilisateur[i].id;
cell1.innerText = utilisateur[i].checked
cell2.innerText = utilisateur[i].prenom;
cell3.innerText = utilisateur[i].date;
cell4.innerText = utilisateur[i].examen;
cell5.innerText = utilisateur[i].note;
row.appendChild(cell0); // afficher dans le tableau la cellule
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
// row.appendChild(cell6);
// row.appendChild(cell7);
// row.appendChild(cell8);
// document.getElementsById("tbody")[0].appendChild(row);
// var elem = document.getElementsById("tabs1");
// var mychild = document.getElementById("")
// elem.insertBefore(mypara, mychild);
// elem.appendChild(row);
var element = document.getElementById("tbody"); // afficher le tableau
element.appendChild(row); // afficher le tableau
}
$(document).ready(function(){
$(cell1).toggleClass("bs-checkbox");
});
// hidden une column
// $(document).on("click", "[data-column]", function () {
// alert("coucou");
// var button = $(this),
// header = $(button.data("column")),
// table = header.closest("table"),
// index = header.index() + 1,
// selector = "tbody tr td:nth-child(" + index + ")",
// column = table.find(selector).add(header);
// column.toggleClass("hidden");
// });
我想使用按钮禁用“ID”列以显示或不显示该列。所以我会尝试一些 jQuery，但我对 jQuery 并不是很熟悉。所以我问，我怎样才能用按钮禁用我的专栏？
解决方案
你可以使用这个javascript。您只需要更改表中 id 列索引的数字 2 即可。
基本上，一旦按下按钮，我们将遍历表中的每一行并找到 id 列然后切换它
$(document).ready(function(){
$("#ToggleIdCol").click(function(){
$("#myTable").find("tr").each(function(key, value){
$(value).find("td:nth-child(2), th:nth-child(2)").toggle();
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>CC</th>
<th>IDC</th>
<th>BC</th>
<th>CCC</th>
</tr>
<tr>
<td>A</td>
<td>ID</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>2</td>
<td>ID</td>
<td>vv</td>
<td>1</td>
</tr>
</table>
<button id="ToggleIdCol">Toogle Show/Hide Id</button>推荐阅读
- python - 按属于某个数字范围的每个条目绘制数据框列？
- jooq - 如何排除特定的 DB 对象，使其免于为其生成 JPA 注释？
- sql - 我将在我的方案中的表上授予选择的角色分配给其他用户。如果我删除此表并通过备份恢复它会发生什么？
- css - 使用css围绕中心文本位置旋转svg文本
- angular - 为什么会自动选中下一个复选框？
- php - PHP 以丑陋的单行返回结果
- html - 如何使用存储在 Firestore 中的图像 url
- laravel - Laravel Spatie Query Builder：使用 Axios 使用 API 的正确方法
- c++ - 对构造函数语法的一点误解
- php - in_array() 期望参数 2 是数组，布尔值在行中给出