2009-06-24 13 views
0

Je crée dynamiquement mes lignes lorsque l'utilisateur clique sur "Ajouter".parentNode.parentNode.rowindex pour supprimer une ligne dans une table dynamique

 <?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script> 
    function getXhr(){ 
       var xhr = null; 
       if(window.XMLHttpRequest) // Firefox and others 
        xhr = new XMLHttpRequest(); 
       else if(window.ActiveXObject){ // Internet Explorer 
        try { 
          xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
         } catch (e) { 
          xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
         } 
       } 
       else { // XMLHttpRequest not supported by your browser 
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
        xhr = false; 
       } 
           return xhr 
      } 

     /** 
     * method called when the user clicks on the button 
     */ 
     function go(){ 
      var xhr = getXhr() 
      // We defined what we gonna do with the response 
      xhr.onreadystatechange = function(){ 
       // We do somthing once the server's response is OK 
       if(xhr.readyState == 4 && xhr.status == 200){ 
        //alert(xhr.responseText); 
        var body = document.getElementsByTagName("body")[0]; 

       // Retrieve <table> ID and create a <tbody> element 

        var tbl = document.getElementById("table"); 
        var tblBody = document.createElement("tbody"); 
        var row = document.createElement("tr"); 

       // Create <td> elements and a text node, make the text 
       // node the contents of the <td>, and put the <td> at 
       // the end of the table row 
        var cell_1 = document.createElement("td"); 
        var cell_2 = document.createElement("td"); 
        var cell_3 = document.createElement("td"); 
        var cell_4 = document.createElement("td"); 

       // Create the first cell which is a text zone 
        var cell1=document.createElement("input"); 
        cell1.type="text"; 
        cell1.name="fname"; 
        cell1.size="20"; 
        cell1.maxlength="50"; 
        cell_1.appendChild(cell1); 

       // Create the second cell which is a text area 
        var cell2=document.createElement("textarea"); 
        cell2.name="fdescription"; 
        cell2.rows="2"; 
        cell2.cols="30"; 
        cell_2.appendChild(cell2); 

        var cell3 = document.createElement("div"); 
        cell3.innerHTML=xhr.responseText; 
        cell_3.appendChild(cell3); 


       // Create the fourth cell which is a href 
        var cell4 = document.createElement("a"); 
        cell4.appendChild(document.createTextNode("[Delete]")); 
        cell4.setAttribute("href","javascrit:deleteRow();"); 
        cell_4.appendChild(cell4); 


       // add cells to the row 
        row.appendChild(cell_1); 
        row.appendChild(cell_2); 
        row.appendChild(cell_3); 
        row.appendChild(cell_4); 


       // add the row to the end of the table body 
        tblBody.appendChild(row); 

       // put the <tbody> in the <table> 
        tbl.appendChild(tblBody); 
       // appends <table> into <body> 
        body.appendChild(tbl); 
       // sets the border attribute of tbl to 2; 
        tbl.setAttribute("border", "1"); 
      } 

       } 

      xhr.open("GET","fstatus.php",true); 
      xhr.send(null); 
     } 

</head> 
<body > 
<h1> Create an Item </h1> 
<form method="post"> 
    <table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table"> 
     <tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr> 

    </table>  

</form> 
</body> 
</html> 

Maintenant, je voudrais utiliser le href [Supprimer] pour supprimer une ligne particulière.

j'ai écrit ceci:

<script type="text/javascript"> 
function deleteRow(r){ 
var i=r.parentNode.parentNode.rowIndex; 
document.getElementById('table').deleteRow(i); 
} 
</script> 

Quand je change le premier comme ce code: cell4.setAttribute("href","javascrit:deleteRow(this);");

Je suis une erreur: La page ne peut être affichée. Je suis redirigé vers une nouvelle page qui ne peut pas être affichée.

Comment puis-je supprimer ma ligne en utilisant la fonction deleteRow (r)? tableau est l'id de ma table

+0

cell4.setAttribute ("href", "javascrit: deleteRow (this);"); ==> vous manquez le 'p' dans 'javascript'. Si c'est dans votre code, c'est votre problème. – ajm

+1

Ce n'est pas une faute d'orthographe (javascrit: ...)? cell4.setAttribute ("href", "javascrit: deleteRow (this);"); – karim79

+0

Oh merci beaucoup. Je suis vraiment stupide parfois. – billy85

Répondre

0
+3

S'il vous plaît poster des réponses comme une réponse, si vous ne pouvez pas poster toute la réponse, puis résumer ce que vous liez et utiliser le site externe comme une * ressource *, pas l'intégralité de la réponse. Au * very * least explain * pourquoi * nous devrions regarder cette URL. –