0
votes

Comment ajouter et supprimer des lignes avec des boutons?

J'ai désespérément besoin d'aide, j'ai une table pour laquelle je veux ajouter et supprimer des lignes avec des boutons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Assessment</title>
    <link rel="stylesheet" href="css/normalise.css">
    <link rel="stylesheet" href="css/Main.css">
</head>

<body id="Mybody">     
    <form id="RiskManagement">    
    <fieldset>
        <table id="myTable"> 
            <tr>
                <th>#</th>
                <th>Activity conducted</th>
                <th>Hazard associated with the activity</th>
                <th>Risk associated with the hazard</th>
                <th>Liklihood of risk manifesting</th>
                <th>Consequence for when risk manifest</th>
                <th>Risk rating</th>
                <th>Risk severity level</th>
                <th>Controls to implement</th>
           </tr>
           <tr class="MyRow" id="rs">
               <td><input type="number" id="riskNumber" readonly></td>
                <td><textarea type="text"></textarea></td> <!--activity input-->
                <td><textarea type="text"></textarea></td> <!--Hazard input-->
                <td><textarea type="text"></textarea></td> <!--risk input-->
                <td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
                <td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
                <td id="myRisk"><input  id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
                <td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
                <td><textarea type="text"></textarea></td>
                <td><button class="remove" id="removeRows">-</button></td> <!--Remove button-->
        </tr>
        </table>   
    </fieldset>
    <button id="addRow">+ Add</button>
    </form>
    <script src="js/app.js"></script>
</body>
</html>

veuillez m'aider avec des directives ou même un morceau de code dans java que je peux utiliser pour ajouter et supprimer des lignes en utilisant les boutons.

Une aide serait grandement appréciée.

javascript html-table

2 commentaires

Qu'avez-vous déjà essayé et pourquoi cela n'a-t-il pas fonctionné?

pouvez-vous ajouter votre js / app.js

3 Réponses :

2
votes

Vous avez presque raison avec votre approche, il suffit de voir le code ci-dessous et de mettre en œuvre ces modifications

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable"> 
    <tr>
        <th>#</th>
        <th>Activity conducted</th>
        <th>Hazard associated with the activity</th>
        <th>Risk associated with the hazard</th>
        <th>Liklihood of risk manifesting</th>
        <th>Consequence for when risk manifest</th>
        <th>Risk rating</th>
        <th>Risk severity level</th>
        <th>Controls to implement</th>
   </tr>
     <tr class="MyRow" id="rs">
         <td><input type="number" id="riskNumber" readonly></td>
          <td><textarea type="text"></textarea></td> <!--activity input-->
          <td><textarea type="text"></textarea></td> <!--Hazard input-->
          <td><textarea type="text"></textarea></td> <!--risk input-->
          <td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
          <td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
          <td id="myRisk"><input  id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
          <td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
          <td><textarea type="text"></textarea></td>
          <td>
            <button class="remove" onclick="removeCurrentRow(0)">-</button>
          </td> <!--Remove button-->
  </tr>
</table>

function removeCurrentRow(indexOfRow) {
  $('.MyRow').eq(indexOfRow).remove();
}

2 commentaires

Lorsque vous ajoutez des lignes, vous rencontrez des problèmes avec onClick. Mieux vaut ajouter le gestionnaire de clic de suppression sur la table avec addEventListener pour qu'il gère toujours la suppression; également pour les lignes ajoutées dynamiquement.

Voir la réponse d'AJAY MAURYA pour un exemple d'utilisation de jQuery délégation d'événements . Il est préférable de ne pas attacher la gestion des événements en HTML

0
votes

Je suppose que l'identifiant de removeRows est incorrect car vous pouvez avoir plusieurs lignes, donc plusieurs boutons qui supprimeront l'élément. J'ai retiré cet identifiant du tableau.

<table id="myTable"> 
  <tr>
      <th>#</th>
      <th>Activity conducted</th>
      <th>Hazard associated with the activity</th>
      <th>Risk associated with the hazard</th>
      <th>Liklihood of risk manifesting</th>
      <th>Consequence for when risk manifest</th>
      <th>Risk rating</th>
      <th>Risk severity level</th>
      <th>Controls to implement</th>
  </tr>
  <tr class="MyRow" id="rs">
      <td><input type="number" id="riskNumber" readonly></td>
        <td><textarea type="text"></textarea></td> <!--activity input-->
        <td><textarea type="text"></textarea></td> <!--Hazard input-->
        <td><textarea type="text"></textarea></td> <!--risk input-->
        <td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
        <td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
        <td id="myRisk"><input  id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
        <td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
        <td><textarea type="text"></textarea></td>
        <td><button class="remove">-</button></td> <!--Remove button-->
  </tr>
</table>

<button id="addRow">+ Add</button>

//add click listener on table (you can now add and remove rows without it breaking)
document.querySelector('#myTable').addEventListener(
  'click',
  e=>{
    //if the thing clicked has a class of remove        
    if(e.target.className==='remove'){
      //remove parent of parent of the button (is the row)
      e.target.parentElement.parentElement.remove();
    }
  }
);

document.querySelector('#addRow').addEventListener(
  'click',
  e=>{
    //create a row and set innerhtml (removed all id's since they won't be unique)
    const row = document.createElement('tr');
    row.innerHTML = `
          <td><input type="number" readonly></td>
        <td><textarea type="text"></textarea></td> <!--activity input-->
        <td><textarea type="text"></textarea></td> <!--Hazard input-->
        <td><textarea type="text"></textarea></td> <!--risk input-->
        <td ><input type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
        <td ><input type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
        <td ><input  id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
        <td ><input type="text" readonly></td> <!--severity level to auto display input-->
        <td><textarea type="text"></textarea></td>
        <td><button class="remove">-</button></td> <!--Remove button-->
    `;
    //add the row to the table
    document.querySelector('#myTable').appendChild(row);
  }
)

0 commentaires

1
votes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Assessment</title>
    <link rel="stylesheet" href="css/normalise.css">
    <link rel="stylesheet" href="css/Main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body id="Mybody">     
    <form id="RiskManagement">    
    <fieldset>
        <table id="myTable"> 
            <tr>
                <th>#</th>
                <th>Activity conducted</th>
                <th>Hazard associated with the activity</th>
                <th>Risk associated with the hazard</th>
                <th>Liklihood of risk manifesting</th>
                <th>Consequence for when risk manifest</th>
                <th>Risk rating</th>
                <th>Risk severity level</th>
                <th>Controls to implement</th>
           </tr>
           <tr class="MyRow" id="rs">
               <td><input type="number" id="riskNumber" readonly></td>
                <td><textarea type="text"></textarea></td> <!--activity input-->
                <td><textarea type="text"></textarea></td> <!--Hazard input-->
                <td><textarea type="text"></textarea></td> <!--risk input-->
                <td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
                <td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
                <td id="myRisk"><input  id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
                <td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
                <td><textarea type="text"></textarea></td>
                <td><button class="remove" id="removeRows" type="button">-</button></td> <!--Remove button-->
        </tr>
        </table>   
    </fieldset>
    <button id="addRow" type="button">+ Add</button>
    </form>
  
</body>
</html>

$(document).ready(function(e) {
        $('#addRow').on('click', function(){
			var cln=$("#rs").clone()
			$('#myTable').append(cln)
			})
		$('body').on('click','.remove',function(){
			$(this).closest('tr').remove();
			})
    });

1 commentaires

Idéal pour utiliser la délégation d'événements , mais lorsque vous clonez un élément, vous finirez par avoir plusieurs id. Les identifiants doivent être supprimés de la ligne du tableau et des éléments qu'il contient.