如何使用 Javascript 禁用和启用 HTML 表格？答案

【问题标题】：How to disable and enable HTML table using Javascript?如何使用 Javascript 禁用和启用 HTML 表格？
【发布时间】：2011-10-26 06:44:53
【问题描述】：

我想知道如何通过单击 html 按钮使用 Javascript 禁用和启用 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>

每当我单击Disable 按钮时，表格突出显示仍然处于启用状态。我对此有点陌生，所以我真的需要你的帮助。

【问题讨论】：

disabled 表示不会提交表单控件，也无法编辑。表格不是表单控件，因此您要求的内容毫无意义。
这就是我想要发生的事情。当我单击“禁用”按钮时，我希望行突出显示并删除所有效果。

标签： javascript html-table

【解决方案1】：

<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>

修复了您的代码。使用函数检查它是否被禁用，如果不是，则突出显示。如果是，那就不要。很简单。

Demo

【讨论】：

【解决方案2】：

如果您希望它“看起来”禁用或启用，请将类规则添加到样式表并将类添加到表中以启用或禁用。

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, ''));
  }
}

【讨论】：

【解决方案3】：

这将从您的 tr 中删除 onmouseover 事件。

  function disableTable() {
   var rows = document.getElementsByTagName("tr");
   for (var i = 0; i < rows.length; i++) {
     rows[i].onmouseover= null;
   } 
  }

【讨论】：

【解决方案4】：

您不能禁用表。你想用这个实现什么？无论如何，这些表都是只读的。

如果表格中有输入标签，可以一一禁用。

另见"Disabling" an HTML table with javascript

【讨论】：

我希望它看起来像一个禁用的 html 按钮。
但是表格不是按钮。您可以通过 CSS: , CSS: .disabled tr { background-color: gray; 更改表格类并定义禁用样式。 }

【解决方案5】：

<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>

【讨论】：

【解决方案6】：

无法禁用表。您想要做的是禁用输入按钮并在 HTML 表上设置类，这会在您选择的按钮的 onclick 事件上产生一种淡出/变灰的错觉。

【讨论】：

你能否给我一个提示如何做到这一点。我对这件事真的很陌生。谢谢
向您的 HTML 表格添加一个类。说 (table.class) 现在，在您选择显示“禁用”的按钮的 onclick 事件上，确保 onclick 事件触发 html 表格的新样式。（您可以在这里走几条路线，即 JQuery、CSS3 不透明度属性）
我认为 RobG 写的这段代码对于一个简单的过程来说太复杂了。他的问题不需要 REGEX。

【解决方案7】：

您不能禁用表。表格只显示数据 - 在 HTML 中，您只能禁用输入、选择和文本区域等表单元素，因此您无法再与它们交互（即在其中键入数据、单击它或选择一个选项）。

我认为您想要实现的是在单击按钮时删除 onMouseOver/-Out 事件？您最好使用jQuery - 看看Events。解决方案是像 fiddle 一样在按钮单击时添加和删除事件。

【讨论】：

【解决方案8】：

按照这个食谱：

定义两组 CSS 规则。一组规则始终以table.enabled 开头，另一组以table.disabled 开头

要启用/禁用整个表格，请找到 DOM 元素（当表格具有 id tblTest 时使用 document.getElementbyId('tblTest')）并分配相应的类：

document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';

【讨论】：

【解决方案9】：

如果你想让表格在任何地方“不可点击” - 你可以在上面添加一个相同大小的透明 div。

【讨论】：

【解决方案10】：

可以通过将表格保留在“fieldset”标签中并通过Javascript禁用它来阻止带有输入字段的整个表格

【讨论】：

请提供基于OP源代码的解决方案