Maison  >  Questions et réponses  >  le corps du texte

Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery

J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'est pas cliqué. Par exemple, lorsque je clique sur un bouton de la première ligne, je souhaite récupérer la valeur de la ligne sur laquelle on n'a pas cliqué.

 
var table = document.getElementById("all_department");
if (table != null) {
  for (var i = 0; i < table.rows.length; i++) {
  table.rows[i].onclick = function() {
  tableText(this);
      }
    }
  }    
    
function tableText(tableRow) {
var myJSON = JSON.stringify(tableRow);
console.log(myJSON);
}
    <table id="all_departments">
     <thead>
              <th><button>click</button></th>                                   
              <th>Departments</th>
              <th>Creation Date</th>
              <th>Name</th>
     </thead>
    <tbody class="bl">
           <tr>
                <td><button>click</button></td>
                <td>Management</td>
                <td>2-3-2016</td>
                <td>client x</td>
          </tr>
    
           <tr>
                <td><button>click</button></td>
                <td>Sales</td>
                <td>25-6-2019</td>
                <td>client y</td>
          </tr>
    </tbody>
    </table>

P粉431220279P粉431220279177 Il y a quelques jours1431

répondre à tous(1)je répondrai

  • P粉561323975

    P粉5613239752024-04-06 00:50:27

    Vous pouvez écouter le gestionnaire de clic sur le bouton, obtenir le tr parent du bouton cliqué, puis obtenir le bouton frère.

    Une fois que nous avons tous les frères et sœurs, nous pouvons les parcourir et former notre chaîne résultante.

    Veuillez vous référer au code ci-dessous

    const allBtns = document.querySelectorAll('button');
    allBtns.forEach(function(btn) {
      btn.addEventListener('click', function(e) {
        let elem = this.closest('tr');
        const siblings = getSiblings(elem);
        const result = [];
        siblings.map(ele => {
          ele.querySelectorAll('td').forEach((e, i) => {
            if (i !== 0) {
              result.push(e.innerText);
            }
          });
        });
        console.log(result.join(','));
      })
    });
    
    const getSiblings = function(e) {
      let siblings = [];
      if (!e.parentNode) {
        return siblings;
      }
    
      let sibling = e.parentNode.firstChild;
    
      while (sibling) {
        if (sibling.nodeType === 1 && sibling !== e) {
          siblings.push(sibling);
        }
        sibling = sibling.nextSibling;
      }
      return siblings;
    };
    Departments Creation Date Name
    Management 2-3-2016 client x
    Sales 25-6-2019 client y

    répondre
    0
  • Annulerrépondre