堆棧內存溢出
  簡體   English   中英

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

[英]How to disable and enable HTML table using Javascript?

 原文  2011-10-26 06:44:53  6   10    javascript/ html-table

問題描述

我想知道如何通過單擊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按鈕時，表格突出顯示仍處於啟用狀態。 我對此有點新意，所以我真的需要你的幫助。

10 個解決方案

解決方案1
 2  2011-10-26 06:49:32

您無法禁用表格。 你想用這個來實現什么？ 這些表格無論如何都是只讀的。

如果表中有輸入標記，則可以逐個禁用它們。

另請參閱使用javascript“禁用”HTML表格

解決方案2
 2  2011-10-26 06:57:10

如果要將其“查看”禁用或啟用，請將類規則添加到樣式表，並將類添加到表中以啟用或禁用。 

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
 2  2011-10-26 07:30:57

這將從你的tr中刪除onmouseover事件。 

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

解決方案4
 2 已采納  2011-10-26 07:33:39

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

修復了你的代碼。 使用函數檢查它是否被禁用，如果不是，則突出顯示。 如果是，那就不要。 很簡單。

演示

解決方案5
 1  2011-10-26 07:08:23

無法禁用表格。 你想要做的是禁用輸入按鈕，並在HTML表格上有一個類，它會給你選擇按鈕的onclick事件淡出/淡出的幻覺。

解決方案6
 1  2011-10-26 07:13:54

您無法禁用表格。 表只顯示數據 - 在HTML中你只能禁用輸入，選擇和textareas等表單元素，因此你不能再與它們交互（即在其中鍵入數據，單擊它或選擇一個選項）。

我認為你想要實現的是在按鈕點擊上刪除事件onMouseOver / -Out？ 你可能最好使用jQuery - 看一下Events 。 解決方案是在按鈕點擊中添加和刪除事件，就像在這個小提琴中一樣 。

解決方案7
 1  2011-10-26 07:15:18

請遵循以下食譜：

定義兩組CSS規則。 一組規則始終以table.enabled ，另一組以table.disabled

要啟用/禁用整個表，請找到DOM元素（當表具有id tblTest時使用document.getElementbyId('tblTest') ）並分配相應的類： 

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

解決方案8
 1  2011-10-26 07:17:58

如果你想讓它在任何地方“無法點擊” - 你可以在上面添加一個相同大小的transperent div。

解決方案9
 0  2019-03-26 08:10:28

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

解決方案10
 -1  2019-03-24 11:57:59

通過將表保留在“fieldset”標記中並通過Javascript禁用它，可以阻止包含輸入字段的整個表

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用敲除功能禁用/啟用html表中的所有元素 如何使用Javascript / jQuery隱藏/顯示啟用/禁用HTML元素？ 如何使用 javascript 在 html 中安排啟用/禁用元素？ 如何使用JavaScript禁用/啟用HTML5視頻標記 使用HTML和Javascript啟用/禁用選項卡 如何使用 JavaScript HTML 在多行表中通過復選框啟用下拉列表 如何使用javascript以編程方式啟用和禁用按鈕 如何在計時器中使用javascript啟用/禁用div 如何使用JavaScript在GridView中啟用和禁用CheckBox？ 如何使用JavaScript啟用和禁用后退按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM