Javascript Ausblenden von Spalten Standardmäßig

Nach dem surfen für online-tutorials zu Javascript show/hide konnte ich nur finden Beispiele auf, wo alle Säulen wurden standardmäßig sichtbar. Ich bin auf der Suche nach einem Weg, um einige Spalten standardmäßig ausgeblendet (und Ihnen zu ermöglichen, ein-und ausgeblendet werden über eine checkbox), und einige Spalten standardmäßig angezeigt (und lassen Sie Sie ausgeschaltet werden über eine checkbox).

Ist das möglich?

Referenz für meine Tabellenstruktur ist wie folgt:

<table>
  <thead>
<tr>
  <th>Name</th>
  <th>Job</th>
</tr>
  </thead>
  <tbody>
    <tr>
      <td>Mike</td>
      <td>Dancer</td>
    </tr>
  </tbody>
</table>

Bitte finden meine und mit ausführlichen Beispiels. Es ist gemacht mit Hilfe von jquery

InformationsquelleAutor Patrick | 2012-05-24

Reinen javascript:

HTML

<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br />
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br />

function showhide(column, elem){
    if (elem.checked)
        dp = "table-cell";
    else
        dp = "none";
    tds = document.getElementsByTagName('tr');
    for (i=0; i<tds.length; i++)
        tds[i].childNodes[column].style.display = dp;
}

Reine JS-fiddle Beispiel

Bitte erwägen Sie die Verwendung einer javascript-Bibliothek wie JQuery für solch triviale Dinge. Ihr code könnte so einfach sein wie:

HTML

<input type="checkbox" data-col="1" checked="checked" /> Name<br />
<input type="checkbox" data-col="2" checked="checked" /> Job<br />

jQuery JS:

$(function(){
    $(':checkbox').on('change', function(){
        $('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();
    });
});

jQuery-Fiddle Beispiel

Dies ist viel weniger code, aber wie kann ich die Spalten ausblenden, die standardmäßig? Ihr Beispiel zeigt alle Spalten werden standardmäßig angezeigt.
Mit jQuery oder pure JS? So oder so, würden Sie müssen nur beginnen Sie mit den Checkboxen deaktiviert und ausblenden der Spalten, die Sie ausblenden möchten, in den Körper der onload (reines JS) oder $(document).ready() (jQuery). Hier ist die jQuery Fiddle und der Pure JS ein. Ich habe einige Kommentare Hinzugefügt, um diejenigen, die zu.

InformationsquelleAutor Fabrício Matté

3

Hier ist die toggle-Funktion (mit jQuery):
```
function toggleColumns(column, state) {
    var cells = $("table").find("th, td").filter(":nth-child(" + column + ")");

    if (state)
        cells.hide();
    else
        cells.show();
}
```
Wenn Sie brauchen, dass die Spalte standardmäßig ausgeblendet, Sie können diese Funktion aufrufen, während ein onLoad.
Beispiel http://jsfiddle.net/nynEd/
- Könnten Sie erklären, wie man diese Funktion aufrufen, während ein onLoad? Ich brauche viele Spalten standardmäßig ausgeblendet.
InformationsquelleAutor Greegus

in der css solltest du so etwas wie

.hidden{
    display:none;
}
.shown{
    display:block;
}

dann in Ihre html-solltest du so etwas wie

<table>
  <thead>
     <tr>
        <th id="th1" class="shown">Name</th>
        <th id="th2" class="shown">Job</th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td id="td1" class="shown">Mike</td>
      <td id="td2" class="shown">Dancer</td>
    </tr>
  </tbody>
</table>

du dann implementieren müssen, um ein togle Methode wird die Sichtbarkeit der Spalte

//id should be passhed as 1, 2, 3 so on...
function togleTable(id){
    if(document.getElementById("th"+id).className == "shown"){
        document.getElementById("th"+id).className = "hidden";
    }
    if(document.getElementById("td"+id).className == "shown"){
        document.getElementById("td"+id).className = "hidden";
    }
    if(document.getElementById("th"+id).className == "hidden"){
        document.getElementById("th"+id).className = "shown";
    }
    if(document.getElementById("td"+id).className == "hidden"){
        document.getElementById("td"+id).className = "shown";
    }
}

und dann in die compobox onChange () - Ereignis sollten Sie rufen die togleTable Funktion übergeben, die als id die Nummer der Zeile, die Sie wollen, um zu zeigen/verbergen

dies ist ein guter Ort, um zu starten, denke ich.
Spaß haben

AKTUALISIERT

wenn Sie möchten, um mehr als eine Klasse für deine Zeilen, vergessen Sie nicht, können Sie auch dieses verwenden:
Dokument.getElementById('id').classList.add('class');
Dokument.getElementById('id').classList.entfernen('class');

InformationsquelleAutor MaVRoSCy

Gibt es viele Wege, die für diese meine option ist die Verwendung der basic-jquery-Funktionen wie,

<input type="checkbox" id="opt1" checked/>col 1
<input type="checkbox" id="opt2"/>col 2

<table border="1" cellpadding="5">
  <thead>
<tr>
  <th>Name</th>
  <th>Job</th>
  <th id="col1">col 1</th>
  <th id="col2">col 2</th>
</tr>
  </thead>
  <tbody>
    <tr>
      <td>Mike</td>
      <td>Dancer</td>
      <td class="data1">data 1</td>
      <td class="data2">data 2</td>
    </tr>
  </tbody>
</table>

Dies ist dein HTML-code,

$(document).ready(function() {
    if($("#opt1").is(":checked")){
         $("#col1").show();
        $(".data1").show();   
    }else{
         $("#col1").hide();
        $(".data1").hide();
    }
    if($("#opt2").is(":checked")){
         $("#col2").show();
        $(".data2").show();   
    }else{
         $("#col2").hide();
        $(".data2").hide();
    }

    $("#opt1").live('click', function() {
        if($("#opt1").is(":checked")){
         $("#col1").show();
        $(".data1").show();   
    }else{
         $("#col1").hide();
        $(".data1").hide();
    }
    });

    $("#opt2").live('click', function() {
       if($("#opt2").is(":checked")){
         $("#col2").show();
        $(".data2").show();   
    }else{
         $("#col2").hide();
        $(".data2").hide();
    }
    });
});

Dies ist ein java-script-code.

Finden arbeiten Beispiel

InformationsquelleAutor Umesh Aawte

0

Den Spalten, die Sie ausblenden möchten, sollte das Attribut " style="display:none" zunächst
- Definitiv nicht. Google will strike you down für, die. Wenden Sie den Stil mit javascript, wenn Sie nicht möchten, dass ein problem mit Google/Nicht-js-Nutzer.
- Sorry, aber du weißt nicht, ob er es machen will für die intranet-Anwendung..
- Ich bin mit diesem für eine intranet-Datenbank-Anwendung. Und was meinst du mit Google-Nutzern? Dies funktioniert in chrome.
InformationsquelleAutor anjalis

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.