Weergave in tabel

Status
Niet open voor verdere reacties.
F

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.260
Hallo

Ik heb onderstaande tabel als voorbeeld.

Nou verwijder ik de rij door voor X te kiezen , het moet in dit geval steeds de bovenste rij zijn die ik kan verwijderen (dus alleen van bovenaf mogelijk)

Echter hoe verberg ik die andere kruisjes in voorbeeld van ID 12 tot 9.
Ik zou de laatste ID kunnen opvragen in tabel / vergelijken en dan alleen laatste X kunnen laten printen.

Maar misschien ook nog andere oplossing met Css?

X is overigens een bootstrap glyphicons <span class="glyphicon glyphicon-remove-circle"></span>
maar kan ik uiteraard ook veranderen.




IDVerwijder
12
x
11x
10x
9x
 
Heb je een stukje code die minimaal nodig is voor de helpers?
Zo te zien Bootstrap 3. Wat heb je nu aan html?
 
Laatst bewerkt:
Code hier is wat omslachtig

Ik wil het delete teken wat ik gebruik (X) alleen in bovenste rij zichtbaar hebben
Als er op geklikt wordt , wordt via PHP Mysql de rij verwijderd
Nu is het in alle rijeb zicht baar , heeft met Bootstrap weinig van doen voor de rest.
 
Waarom is de html omslachtig? Een minimal stukje html ziet er ongeveer zo uit.
Code: 
<div id="twrap">
  <table>
    <thead>
      <tr><th>ID</th><th>Verwijder</th></tr>
    </thead>
    <tbody>
      <tr><td>10</td><td>x</td></tr>
      <tr><td>11</td><td>x</td></tr>
      <tr><td>12</td><td>x</td></tr>
      <tr><td>13</td><td>x</td></tr>
      <tr><td>14</td><td>x</td></tr>
    </tbody>
  </table>
</div>
<script>
// hier komt wat javascript (zie onder)
</script>

Styling voor alle apparaten
Code: 
#twrap {
  width: 100%;
  max-width: 250px; /* <= zelf bepalen */
  margin: 0 auto;
  overflow-x: auto;
}
#twrap * {
  margin: 0;
  box-sizing: border-box;
}
#twrap table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 0;
  background-color: transparent;
}
#twrap thead, #twrap tbody, #twrap tr {
  width: inherit;
}
#twrap th, #twrap td {
  vertical-align: top;
  white-space: normal;
  padding: 4px 6px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}
#twrap th {
  width: 50%;
  font-weight: 700;
  background-color: #ff9;
}
/* smartphone */
@media (max-width: 767.9px) {
  #twrap table {
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
/* omlijning */
#twrap table {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
#twrap td, #twrap th {
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
}
/* klikbare rij (tr.active via javascript) */
#twrap tbody tr.active td:last-child {
  cursor: pointer;
  background-color: #fcf;
}
/* verberg rij (tr.hide via javascript) */
#twrap tbody tr.hide {
  display: none;
}

en de javascript voor de functionaliteit
Code: 
var wrap = "#twrap";
document.querySelectorAll(wrap + " tbody tr").forEach(trRemoveHide);
document.querySelector(wrap + " tbody tr:first-child").classList.add("active");
document.querySelectorAll(wrap + " tbody td:last-child").forEach(tdClickHandler);

function trRemoveHide (tr, index) {
  tr.classList.remove("hide");
}

function tdClickHandler (td, index) {
  td.addEventListener("click", function() {
    var tr = this.parentElement;
    var trNext = tr.nextElementSibling;
    if (tr.classList.contains("active")) {
      tr.classList.remove("active");
      tr.classList.add("hide");
      if (trNext != null) trNext.classList.add("active");
    }
  });
}
 
Beste Bron

Bedankt werkt prima, dit was mijn simpele HTML
Het x is bij mijn een glyphicon maar x kan ook.

Het beste wat als deze alleen in bovenste dus te verwijderen rij zichtbaar zou zijn ,maar is geen pre.

Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Naamloos document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>

<table>
<thead>
<tr>
  <th>ID</th><th>Verwijder</th>
</tr>
</thead>
<tbody>
<tr>
  <td>10</td>
  <td><a href="delete.php?del=1469" onclick="return confirm('Weet je het zeker?')">
  <span class="glyphicon glyphicon-remove-circle"></span></a></td>
</tr>
<tr>
  <td>11</td>
  <td><a href="delete.php?del=1469" onclick="return confirm('Weet je het zeker?')">
  <span class="glyphicon glyphicon-remove-circle"></span></a></td>
</tr>
<tr>
  <td>12</td>
  <td><a href="delete.php?del=1468" onclick="return confirm('Weet je het zeker?')">
  <span class="glyphicon glyphicon-remove-circle"></span></a></td>
</tr>
<tr>
  <td>13</td>
  <td><a href="delete.php?del=1467" onclick="return confirm('Weet je het zeker?')">
  <span class="glyphicon glyphicon-remove-circle"></span></a></td>
</tr>
<tr>
  <td>14</td>
  <td><a href="delete.php?del=1466" onclick="return confirm('Weet je het zeker?')">
  <span class="glyphicon glyphicon-remove-circle"></span></a></td>
</tr>
</tbody>
</table>

</body>
</html>
 
Laatst bewerkt door een moderator:
Er zitten wat bugs in zoals dubbele <td> en <span.../> en er missen wat </a>
Ik heb je post aangepast en gelijk in
Code: 
[/noparse] tags gezet.
 
Bedankt ..,ja slechte ogen.
Nou wordt het toch nog een ander verhaal met mijn code....
 
Laatst bewerkt:
Is er een mogelijkheid de X of glypicon alleen in 1e rij te tonen

<td><a href="delete.php?del=<?= $row['id']; ?>" onclick="return confirm('Weet je het zeker? ')"><span class="glyphicon glyphicon-remove-circle"></span></a></td>

Ik dacht het zo te kunnen oplossen (met achtergrond afb. )maar dan heb ik geen link die ik kan aanklikken.

HTML: 
/* klikbare rij (tr.active via javascript) */
#twrap tbody tr.active td:last-child {
  cursor: pointer;
  background:url(../img/delete.png)
}
 
Omdat je "bootstrap.min.css" gebruikt kan er een hoop css weg (zit al in Bootstrap). De css die er wel in zit is aangepast voor Bootstrap 3.
De href heb ik er even uitgehaald om te testen. Bij <table> heb ik de Bootstrap class'es toegevoegd. Script is ook iets aangepast.
Code: 
<table id="delTable" class="table table-condensed table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Verwijder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10</td>
      <td><a href="#" onclick="return confirm('Weet je het zeker?')">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>11</td>
      <td><a href="#" onclick="return confirm('Weet je het zeker?')">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>12</td>
      <td><a href="#" onclick="return confirm('Weet je het zeker?')">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>13</td>
      <td><a href="#" onclick="return confirm('Weet je het zeker?')">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>14</td>
      <td><a href="#" onclick="return confirm('Weet je het zeker?')">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
  </tbody>
</table>

<script>
var tbl = "#delTable";
document.querySelectorAll(tbl + " tbody tr").forEach(trRemoveHide);
document.querySelector(tbl + " tbody tr:first-child").classList.add("active");
document.querySelectorAll(tbl + " tbody td:last-child").forEach(tdClickHandler);

function trRemoveHide (tr, index) {
  tr.classList.remove("hide");
}

function tdClickHandler (td, index) {
  td.addEventListener("click", function() {
    var tr = this.parentElement;
    var trNext = tr.nextElementSibling;
    if (tr.classList.contains("active")) {
      tr.classList.remove("active");
      tr.classList.add("hide");
      if (trNext != null) trNext.classList.add("active");
    }
  });
}
</script>

De css wordt dan
Code: 
#delTable {
  max-width: 250px; /* <- zelf bepalen */
  margin: 0 auto 20px auto;
  font-size: 0;
}
#delTable * {
  margin: 0;
}
#delTable thead,
#delTable tbody,
#delTable tr {
  width: inherit;
}
#delTable th,
#delTable td {
  white-space: normal;
  font-size: 14px;
  line-height: 1.42857143;
  text-align: center;
}
#delTable th {
  width: 50%;
  font-weight: 700;
  background-color: #ff9;
}
/* anchor volle breedte */
#delTable tbody a {
  display: block;
  padding: 0;
  border: 0;
  text-decoration: none;
}
/* verberg niet-active glyph */
#delTable tbody tr:not(.active) span.glyphicon {
  display: none;
}
 
Laatst bewerkt:
Om confirm() goed te laten werken kan deze naar de Javascript worden verplaatst. En de html wordt dan wat leesbaarder.
Code: 
<table id="delTable" class="table table-condensed table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Verwijder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10</td>
      <td><a href="delete.php?del=1469">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>11</td>
      <td><a href="delete.php?del=1469">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>12</td>
      <td><a href="delete.php?del=1468">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>13</td>
      <td><a href="delete.php?del=1467">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
    <tr>
      <td>14</td>
      <td><a href="delete.php?del=1466">
      <span class="glyphicon glyphicon-remove-circle"></span></a></td>
    </tr>
  </tbody>
</table>

<script>
// id van tabel
var tbl = "#delTable";

// zet de eerste <tr> als 'active'
document.querySelector(tbl + " tbody tr:first-child").classList.add("active");

// verwijder 'hide' bij elke <tr>
document.querySelectorAll(tbl + " tbody tr").forEach(function (tr, index) {
  tr.classList.remove("hide");
});

// geef elke <a> een 'click' event handler
document.querySelectorAll(tbl + " tbody a").forEach(function (a, index) {
  a.addEventListener("click", function(event) {
    event.preventDefault();
    var anchor = this;
    var tr = anchor.parentElement.parentElement;
    var trNext = tr.nextElementSibling;
    // alleen als op 'OK' wordt geklikt...
    if (confirm("Weet u het zeker?")) {
      // ...en als de <tr> een class 'active' heeft
      if (tr.classList.contains("active")) {
        tr.classList.remove("active");
        tr.classList.add("hide");
        if (trNext != null) trNext.classList.add("active");
        // ga naar href die in de <a> staat
        location.href = anchor.href;
      }
    }
  });
});
</script>
 
Laatst bewerkt:
Beste Bron,

Bedankt voor hulp.

Ik heb nog meer glypicons in mijn rijen staan , die worden nou ook verwijderd.


Kon je uiteraard ook niet weten omdat ik mijn tabel hier vereenvoudigd neerzet-tabelrij.JPG
 
Laatst bewerkt:
Dan kan je het laatste stukje in de css aanpassen en specifiek de "glyphicon-remove-circle" selecteren met
Code: 
#delTable tbody tr:not(.active) span.glyphicon-remove-circle {
  display: none;
}
 
Bedankt die glypicons zijn nou goed

Alleen mis ik de kleuren groen in kolom 7 en 9 (alleen bovenste rij )die daaronder zijn goed

Rood mis ik in de 8e en 10e kolom ook alleen de bovenste rij de anderen zijn hier ook goed

zie afbeelding zelf kom ik niet tot een oplossingBekijk bijlage 353451
 
Zonder html even gokken ;) iets als dit
Code: 
#delTable tbody tr:first-child td:nth-child(7),
#delTable tbody tr:first-child td:nth-child(9) {
  background-color: #afa;
}
#delTable tbody tr:first-child td:nth-child(8),
#delTable tbody tr:first-child td:nth-child(10) {
  background-color: #faa;
}
 
Laatst bewerkt:
Ik krijg alleen maar de bovenste rij gekleurd , zou voor elke rij moeten gelden
(de TH) niet

Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naamloos document</title>
</head>
<style>
/* Oranje*/
#delTable tbody tr:first-child td:nth-child(1) {
  background-color: #F60;
}

/* groen*/
#delTable tbody tr:first-child td:nth-child(5),
#delTable tbody tr:first-child td:nth-child(7),
#delTable tbody tr:first-child td:nth-child(9) {
  background-color: #afa;
}
/*rood*/
#delTable tbody tr:first-child td:nth-child(4),
#delTable tbody tr:first-child td:nth-child(8),
#delTable tbody tr:first-child td:nth-child(10) {
  background-color: #faa;
}
</style>

<body>
 <table id="delTable"  class="table table-bordered table-hover table-responsive tablesorter km-table">
          <thead>
            <tr>
              <th>1</th>
              <th>2</th>
              <th>3</th>
              <th>4</th>
              <th>5</th>
              <th>6</th>
              <th>7</th>
              <th>8</th>
              <th>9</th>
              <th>10</th>
              <th>11</th>
              <th>12</th>
              <th>13</th>
              <th>14</th>
              <th>15</th>
            </tr>
          </thead>
          <tbody>
           <tr>
            <td>1</td>
             <td>2</td>
              <td>3</td>
               <td>4</td>
                <td>5</td>
                 <td>6</td>
                  <td>7</td>
                   <td>8</td>
                    <td>9</td>
                     <td>10</td>
                      <td>11</td>
                       <td>12</td>
                        <td>13</td>
                         <td>14</td>
                          <td>15</td>
                          </tr>
                                <tr>
            <td>1</td>
             <td>2</td>
              <td>3</td>
               <td>4</td>
                <td>5</td>
                 <td>6</td>
                  <td>7</td>
                   <td>8</td>
                    <td>9</td>
                     <td>10</td>
                      <td>11</td>
                       <td>12</td>
                        <td>13</td>
                         <td>14</td>
                          <td>15</td>
                          </tr>
                          <tbody>
                        
</table>
<!--Alleen bovenste rij verwijderen mogelijk-->
<script>
var tbl = "#delTable";
document.querySelectorAll(tbl + " tbody tr").forEach(trRemoveHide);
document.querySelector(tbl + " tbody tr:first-child").classList.add("active");
document.querySelectorAll(tbl + " tbody td:last-child").forEach(tdClickHandler);

function trRemoveHide (tr, index) {
  tr.classList.remove("hide");
}

function tdClickHandler (td, index) {
  td.addEventListener("click", function() {
    var tr = this.parentElement;
    var trNext = tr.nextElementSibling;
    if (tr.classList.contains("active")) {
      tr.classList.remove("active");
      tr.classList.add("hide");
      if (trNext != null) trNext.classList.add("active");
    }
  });
}
</script>
         
          
       
</body>
</html>
 
Alleen mis ik de kleuren groen in kolom 7 en 9 (alleen bovenste rij )die daaronder zijn goed
Rood mis ik in de 8e en 10e kolom ook alleen de bovenste rij de anderen zijn hier ook goed
Klik om te vergroten...
Je vroeg naar de bovenste rij, toch?

Wil je alle rijen, dan kan tr:first-child weg.
Code: 
#delTable tbody td:nth-child(7),
#delTable tbody td:nth-child(9) {
  background-color: #afa;
}
#delTable tbody td:nth-child(8),
#delTable tbody td:nth-child(10) {
  background-color: #faa;
}

Als je de kleuren wat lichter wilt hebben dan wordt het #cfc en #fcc (of #dfd en #fdd)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan