如何使用 Javascript 禁用和启用 HTML 表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7899453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable and enable HTML table using Javascript?
提问by NinjaBoy
I want to know how can I disable and enable the highlighting on an HTML table using Javascript by clicking an html button.
我想知道如何通过单击 html 按钮使用 Javascript 禁用和启用 HTML 表格上的突出显示。
Here are my codes:
这是我的代码：
tabletest.html
tabletest.html
<html>
<head>
<script type="text/javascript">
function disableTable() {
document.getElementbyId('tblTest').disabled = true;
}
function enableTable() {
document.getElementbyId('tblTest').disabled = false;
}
</script>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest tr.highlight td {
background-color: #8888ff;
}
table#tblTest tr.normal {
background-color: #ffffff;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<table id="tblTest">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
<td>Tom</td>
<td>UK </td>
</tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
<td>Hans</td>
<td>Germany</td>
</tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</tbody>
</table>
<input type="button" onclick="disableTable();" value="Disable" />
<input type="button" onclick="enableTable()" value="Enable" />
</body>
</html>
Whenever I click the Disablebutton the table highlighting is still enabled.
I'm kinda new to this so I really need your help.
每当我单击Disable按钮时，表格突出显示仍处于启用状态。我对这个有点陌生，所以我真的需要你的帮助。
采纳答案by Some Guy
<html>
<head>
<script type="text/javascript">
disable = new Boolean();
function highlight(a) {
if(disable==false)a.className='highlight'
}
function normal(a) {
a.className='normal'
}
</script>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest tr.highlight td {
background-color: #8888ff;
}
table#tblTest tr.normal {
background-color: #ffffff;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<table id="tblTest">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
<td>Tom</td>
<td>UK </td>
</tr>
<tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
<td>Hans</td>
<td>Germany</td>
</tr>
<tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</tbody>
</table>
<input type="button" onclick="disable = true;" value="Disable" />
<input type="button" onclick="disable = false;" value="Enable" />
</body>
</html>
Fixed your code. Use a function to check if it's disabled, if it isn't, then highlight. If it is, then don't. Simple enough.
修复了您的代码。使用函数检查它是否被禁用，如果不是，则突出显示。如果是，那就不要。足够简单。
回答by PiTheNumber
You can not disable a table. What do you want to achieve with this? The tables are read only anyway.
您不能禁用表。你想通过这个实现什么？无论如何，这些表都是只读的。
If you have input tags in the table, you can disable those one by one.
如果表中有输入标签，则可以一一禁用它们。
回答by RobG
If you want it to "look" disabled or enabled, add class rules to a style sheet and add classes to the table for enabled or disabled.
如果您希望它“看起来”禁用或启用，请将类规则添加到样式表并将类添加到表中以启用或禁用。
function disableTable() {
addClassName(document.getElementbyId('tblTest'), 'disabled');
}
function enableTable() {
removeClassName(document.getElementbyId('tblTest'), 'disabled');
}
function trim(s) {
return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}
function hasClassName (el, cName) {
var re = new RegExp('(^|\s+)' + cName + '(\s+|$)');
return el && re.test(el.className);
}
function addClassName(el, cName) {
if (!hasClassName(el, cName)) {
el.className = trim(el.className + ' ' + cName);
}
}
function removeClassName(el, cName) {
if (hasClassName(el, cName)) {
var re = new RegExp('(^|\s+)' + cName + '(\s+|$)','g');
el.className = trim(el.className.replace(re, ''));
}
}
回答by roel
This will remove the onmouseover events from your tr's.
这将从您的 tr 中删除 onmouseover 事件。
function disableTable() {
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover= null;
}
}
回答by CPerez721
A table cannot be disabled. What you want to do is disable the input button and have class on the HTML Table that gives sort of the illusion of fading out/ graying out on the onclick event of the button you choose.
不能禁用表。您想要做的是禁用输入按钮并在 HTML 表上设置类，从而在您选择的按钮的 onclick 事件上产生淡出/变灰的错觉。
回答by Peavey
You cannot disable a table. A table just displays data - in HTML you can only disable form elements like inputs, selects and textareas, so you cannot interact with them anymore (ie type data in it, click it or select an option).
您不能禁用表。表格只显示数据 - 在 HTML 中，您只能禁用输入、选择和文本区域等表单元素，因此您无法再与它们交互（即在其中输入数据、单击它或选择一个选项）。
I think what you are trying to achive is to having the events onMouseOver/-Out remove on button click? You might be better off to use jQuery- take a look at Events. The solution is to add and remove events on button click like in this fiddle.
我认为您想要实现的是在单击按钮时删除 onMouseOver/-Out 事件？您最好使用jQuery- 看看Events。解决方案是在按钮单击时添加和删除事件，就像在这个fiddle 中一样。
回答by Aaron Digulla
Follow this recipe:
按照这个食谱：
Define two sets of CSS rules. One set of rules always starts with table.enabled, the other with table.disabled
定义两组 CSS 规则。一组规则总是以 开头table.enabled，另一组规则以table.disabled
To enable/disable the whole table, locate the DOM element (using document.getElementbyId('tblTest')when the table has the idtblTest) and assign the respective class:
要启用/禁用整个表，请定位 DOM 元素（document.getElementbyId('tblTest')当表具有 时使用idtblTest）并分配相应的类：
document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';
回答by Michael Sazonov
If you want to make the table "unclickable" at any place of it - you may add a transperent div above with the same size.
如果你想让表格在它的任何地方“不可点击” - 你可以在上面添加一个相同大小的透明 div。
回答by Sai Kishore Dasamantharao
<html>
<script>
function disableTable(){
document.getElementById("myTableFieldSet").disabled = true;
}
function enableTable(){
document.getElementById("myTableFieldSet").disabled = false;
}
</script>
<body>
<form>
<fieldset>
<!-- place the table in a separate fieldset -->
<fieldset id="myTableFieldSet">
<table id="myTable">
<tr>
<td>Name</td>
<td>Email</td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="email"></td>
</tr>
</table>
</fieldset>
</fieldset>
<button type="button" onclick="disableTable()">Disable Table</button>
<button type="button" onclick="enableTable()">Enable Table</button>
</form>
</body>
</html>
回答by Sai Kishore Dasamantharao
A entire table with input fields can be blocked by keeping the table in "fieldset" tag and disable it via Javascript
可以通过将表格保留在“fieldset”标签中并通过 Javascript 禁用它来阻止包含输入字段的整个表格
