当前位置： 文江博客话题详情

如何使用 Javascript 禁用和启用 HTML 表？

发布于 2024-12-11 23:47:18 字数 2627 浏览 0 评论 0原文

我想知道如何通过单击 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>

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

原文

I want to know how can I disable and enable the highlighting on an HTML table using Javascript by clicking an html button.

Here are my codes:

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 Disable button the table highlighting is still enabled.
I'm kinda new to this so I really need your help.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（10）

暖伴 2024-12-18 23:47:18
<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>

修正了你的代码。使用一个函数检查它是否被禁用，如果没有，则突出显示。如果是的话，那就不要。够简单的。

演示

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

Demo

回复 原文
不离久伴 2024-12-18 23:47:18

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

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

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, ''));
  }
}
回复 原文
青萝楚歌 2024-12-18 23:47:18

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

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

This will remove the onmouseover events from your tr's.

  function disableTable() {
   var rows = document.getElementsByTagName("tr");
   for (var i = 0; i < rows.length; i++) {
     rows[i].onmouseover= null;
   } 
  }
回复 原文
生寂 2024-12-18 23:47:18

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

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

另请参阅“使用 javascript 禁用”HTML 表格

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.

See also "Disabling" an HTML table with javascript

回复 原文
谜兔 2024-12-18 23:47:18
<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>

<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>
回复 原文
燃情 2024-12-18 23:47:18

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

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.

回复 原文
将军与妓 2024-12-18 23:47:18

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

我认为您想要实现的目标是让 onMouseOver/-Out 事件在按钮单击时删除？您可能最好使用 jQuery - 看看 事件。解决方案是添加和删除按钮单击事件，如 fiddle 所示。

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

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.

回复 原文
天邊彩虹 2024-12-18 23:47:18

请遵循以下秘诀：

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

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

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

Follow this recipe:

Define two sets of CSS rules. One set of rules always starts with table.enabled, the other with table.disabled

To enable/disable the whole table, locate the DOM element (using document.getElementbyId('tblTest') when the table has the id tblTest) and assign the respective class:

document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';
回复 原文
念三年u 2024-12-18 23:47:18

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

If you want to make the table "unclickable" at any place of it - you may add a transperent div above with the same size.

回复 原文
绳情 2024-12-18 23:47:18

通过将表保留在“fieldset”标记中并通过 Javascript 禁用它，可以阻止包含输入字段的整个表

A entire table with input fields can be blocked by keeping the table in "fieldset" tag and disable it via Javascript

回复 原文
~没有更多了~

关于作者

撩发小公举

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文