Wie zum deaktivieren und aktivieren von HTML-Tabellen mit Javascript?

Möchte ich wissen, wie kann ich das deaktivieren und aktivieren Sie die Hervorhebung auf eine HTML-Tabelle mit Javascript, indem Sie eine html-Schaltfläche.

Hier sind meine 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>

Immer wenn ich auf die Disable - Taste die Tabelle Hervorhebung ist immer noch aktiviert.
Ich bin ein bisschen neu in diesem, so dass ich wirklich brauchen Ihre Hilfe.

disabled bedeutet, dass ein Formular-Steuerelement werden nicht vorgelegt und kann nicht bearbeitet werden. Tabellen sind nicht Formular-Steuerelemente, so dass das, was Sie fordern, macht keinen Sinn.
Hier ist, was ich will, geschehen. Wenn ich auf den button 'Deaktivieren', möchte ich die Zeile markieren und alle Effekte entfernt werden.

InformationsquelleAutor NinjaBoy | 2011-10-26

html-table javascript

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

Festen code. Eine Funktion verwenden, um zu überprüfen, ob es deaktiviert ist, falls nicht, dann markieren. Wenn es ist, dann nicht. Einfach genug.

Demo

InformationsquelleAutor Some Guy

Wenn Sie wollen, dass es zu "schauen" deaktiviert oder aktiviert ist, fügen Sie Klassenregeln zu einem Stylesheet und hinzufügen von Klassen in der Tabelle aktiviert oder deaktiviert werden.

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

Kannst du pls mir einen Tipp geben, wie dies zu tun. Im wirklich neues zu dieser Sache. Dank

InformationsquelleAutor RobG

Dadurch entfernen Sie die onmouseover-events von deinem tr.

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

InformationsquelleAutor roel

2

Können Sie nicht deaktivieren einer Tabelle. Was wollen Sie erreichen? Die Tabellen können nur gelesen werden Sie trotzdem.

Wenn Sie input-tags in der Tabelle, deaktivieren Sie diese.

Siehe auch "Deaktivieren" eine HTML-Tabelle mit javascript

Ich will es sehen eine html-Schaltfläche deaktiviert.
Aber ein Tisch ist nicht ein button. Sie können ändern Sie die Tabelle Klasse und definieren die Behinderten-Stil über CSS: <table class="disabled">, CSS: .deaktiviert tr { background-color: gray; }

InformationsquelleAutor PiTheNumber
1

Einer Tabelle kann nicht deaktiviert werden. Was Sie tun möchten, deaktivieren Sie die input-Taste und-Klasse auf den HTML-Tabelle, gibt sozusagen die illusion von fading out/Ergrauen auf das onclick-Ereignis der Schaltfläche, die Sie wählen.

Kannst du pls mir einen Tipp geben, wie dies zu tun. Im wirklich neues zu dieser Sache. Dank
Eine Klasse hinzufügen, um Ihre HTML-Tabelle. Sagen (table.class) Nun auf den onclick-Ereignis für die Schaltfläche, die Sie haben zu wählen "Deaktivieren" angezeigt, stellen Sie sicher, dass das onclick-Ereignis ausgelöst, bis die neuen styles für die html-Tabelle. (Sie gehen ein paar Strecken hier ich.e JQuery, CSS3 Opacity-Eigenschaften)
Ich denke, das Stück code RobG schrieb ist viel zu kompliziert für ein einfaches Verfahren. Es gibt keine Notwendigkeit für REGEX in seinem problem.

InformationsquelleAutor CPerez721
1

Können Sie nicht deaktivieren einer Tabelle. Eine Tabelle zeigt nur Daten in HTML können Sie nur deaktivieren, Formular-Elemente wie Eingänge, wählt und Texteingabefelder, so dass Sie nicht mit Ihnen interagieren kann mehr (ie Art der Daten, klicken Sie auf oder wählen Sie eine option).

Ich denke, was Sie versuchen zu erreichen ist, dass die events onMouseOver/-Out entfernen Sie auf den button klicken? Sie könnten besser zu nutzen jQuery - werfen Sie einen Blick auf Veranstaltungen. Die Lösung ist das hinzufügen und entfernen von Ereignissen auf den button klicken, wie in diesem fiddle.

InformationsquelleAutor Peavey
1

Folgen Sie diesem Rezept:

Definieren zwei Sätze von CSS-Regeln. Ein Satz von Regeln beginnt immer mit table.enabled, die andere mit table.disabled

Aktivieren/deaktivieren Sie die gesamte Tabelle, suchen Sie den DOM-element (mit document.getElementbyId('tblTest') wenn der Tisch hat die id tblTest) und Zuordnung der jeweiligen Klasse:
```
document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';
```
InformationsquelleAutor Aaron Digulla
1

Wenn Sie wollen, um die Tabelle "unklickbaren" an jeder beliebigen Stelle - Sie können hinzufügen, ein transperent div oben mit der gleichen Größe.

InformationsquelleAutor Michael Sazonov

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.