Как отключить и включить таблицу HTML с помощью Javascript? - PullRequest
Новая
       0

Как отключить и включить таблицу HTML с помощью Javascript?

6 голосов
/ 26 октября 2011

Я хочу знать, как можно отключить и включить подсветку в таблице 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 ]

2 голосов
/ 26 октября 2011 
<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>

Исправлен ваш код.Используйте функцию, чтобы проверить, если она отключена, если нет, то выделите.Если это так, то не надо.Достаточно просто.

Демо

2 голосов
/ 26 октября 2011

Если вы хотите, чтобы он «выглядел» отключенным или включенным, добавьте правила классов в таблицу стилей и добавьте классы в таблицу для включения или отключения. 

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, ''));
  }
}
2 голосов
/ 26 октября 2011

Это удалит события onmouseover из ваших tr. 

  function disableTable() {
   var rows = document.getElementsByTagName("tr");
   for (var i = 0; i < rows.length; i++) {
     rows[i].onmouseover= null;
   } 
  }
2 голосов
/ 26 октября 2011

Вы не можете отключить таблицу.Чего вы хотите добиться с этим?В любом случае таблицы доступны только для чтения.

Если у вас есть входные теги в таблице, вы можете отключить их по одному.

См. Также «Отключение» таблицы HTML с помощью javascript

1 голос
/ 26 октября 2011

Если вы хотите сделать таблицу «не кликабельной» в любом месте - вы можете добавить вышеупомянутый прозрачный div с таким же размером.

1 голос
/ 26 октября 2011

Следуйте этому рецепту:

Определите два набора правил CSS.Один набор правил всегда начинается с table.enabled, другой - с table.disabled

. Чтобы включить / отключить всю таблицу, найдите элемент DOM (используя document.getElementbyId('tblTest'), когда таблица имеет id tblTest) и назначьте соответствующий класс: 

document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';
1 голос
/ 26 октября 2011

Вы не можете отключить таблицу. Таблица просто отображает данные - в HTML вы можете отключить только элементы формы, такие как вводы, выборки и текстовые области, поэтому вы больше не можете с ними взаимодействовать (т.е. вводите в них данные, нажимаете на них или выбираете опцию).

Я думаю, что вы пытаетесь добиться, чтобы события onMouseOver / -Out удалялись при нажатии кнопки? Возможно, вам лучше использовать jQuery - взгляните на События . Решение заключается в добавлении и удалении событий по нажатию кнопки, как в этой скрипке .

1 голос
/ 26 октября 2011

Таблица не может быть отключена.Что вы хотите сделать, так это отключить кнопку ввода и иметь класс в таблице HTML, который создает иллюзию затухания / затухания события onclick для выбранной вами кнопки.

0 голосов
/ 26 марта 2019 
<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>
0 голосов
/ 24 марта 2019

Вся таблица с полями ввода может быть заблокирована, если оставить таблицу в теге "fieldset" и отключить ее с помощью Javascript

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...