发表新帖
发表新帖

How to disable and enable HTML table using Javascript?

前端 未结
关注
10 1175
醉梦人生
醉梦人生 2020-12-11 18:04

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

相关标签:
10条回答
  • 梦如初夏
    2020-12-11 18:07

    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, ''));
  }
}
    0 讨论(0)
  • 时光说笑
    2020-12-11 18:10

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

    0 讨论(0)
  • 礼貌的吻别
    2020-12-11 18:11 
    <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 讨论(0)
  • 北荒
    2020-12-11 18:13

    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

    0 讨论(0)
  • 面向向阳花
    2020-12-11 18:14

    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.

    0 讨论(0)
  • 天命终不由人
    2020-12-11 18:16

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

    0 讨论(0)
 看不清?
提交回复
热议问题