2009-06-24 15 views
0

Ich erstelle meine Zeilen dynamisch, wenn der Benutzer auf "Ajouter" klickt.parentNode.parentNode.rowindex zum Löschen einer Zeile in einer dynamischen Tabelle

 <?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> 

Nun würde Ich mag die href verwenden [Löschen] eine bestimmte Zeile zu löschen.

Ich schrieb dies:

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

Als ich den ersten Code wie folgt zu ändern: cell4.setAttribute("href","javascrit:deleteRow(this);");

ich einen Fehler bekam: Die Seite kann nicht angezeigt werden. Ich werde auf eine neue Seite umgeleitet, die nicht angezeigt werden kann.

Wie kann ich meine Zeile mit der Funktion deleteRow (r) löschen? Tabelle ist die ID von meinem Tisch

+0

cell4.setAttribute ("href", "javascrit: deleteRow (this);"); ==> Sie vermissen das 'p' in 'Javascript'. Wenn das in Ihrem Code ist, ist das Ihr Problem. – ajm

+1

Es ist nicht, dass Rechtschreibfehler ist es (javascrit: ...)? cell4.setAttribute ("href", "javascrit: deleteRow (this);"); – karim79

+0

Oh vielen Dank. Ich bin manchmal wirklich dumm. – billy85

Antwort

0
+3

Bitte posten Sie Antworten als Antwort, wenn Sie nicht die ganze Antwort posten können, fassen Sie zusammen, was Sie verlinken und verwenden Sie die externe Seite als * Ressource *, nicht die Gesamtheit der Antwort. Am * sehr * am wenigsten erklären * warum * sollten wir uns diese URL anschauen. –

Verwandte Themen