Erstellen Sie Zeile ID für dynamische JS-Tabelle

Ich habe funktionierendes Skript, dass der Benutzer Eingaben in einem Formular abgeschlossen und wenn sie das Formular und den Inhalt des Formulars senden Eingaben als eine Tabellenzeile eingegeben werden.Erstellen Sie Zeile ID für dynamische JS-Tabelle

Gibt es einen Weg, denke ich innerhalb der JS zu jeder Zeile haben eine eindeutige ID und fügen Sie eine Schaltfläche zum Löschen der letzten Spalte jeder Zeile, so dass der Benutzer eine einzelne Zeile löschen kann.

Danke für die Rettung eines Lebens !!!!

HTML-Formular

<form id="my_form" action="table_form.php" method="post"> 
      <div style="width:10%; float:left;"> 
       Quantity<br /> 
       <input name="field_1" type="text" id="field_1" size="3" /> 
      </div> 
      <div style="width:20%; float:left;"> 
       Part Number<br /> 
       <input type="text" id="field_2" name="field_2" /> 
      </div> 
      <div style="width:30%; float:left;"> 
       Notes<br /> 
       <input name="field_3" type="text" id="field_3" size="45" /> 
      </div> 
      <div style="width:20%; float:left;"> 
       Unit Price<br /> 
       <input type="text" id="field_4" name="field_4" /> 
      </div> 
      <div style="width:20%; float:left;"> 
       <br /> 
       <input type="submit" value="Add Row" /> 
      </div> 
     </form> 

     <!-- 
      Here we create our HTML table. 
      Note the ID of the table. This will be used in our javascript file 
      Our table only contains a header row. All other content will be added dynamically 
     --><? $rowid = 1; ?> 
     <table width="100%" id="my_table"> 
     <tbody id="my_table_body"> 
     <tr> 
      <th width="5%"><div align="left">Qty</div></th> 
      <th width="19%"><div align="left">Part Number</div></th> 
      <th width="46%"><div align="left">Notes</div></th> 
      <th width="15%"><div align="left">Unit Price</div></th> 
      <th width="15%"><div align="left">Row Total</div></th> 
     </tr> 
     </tbody> 
</table>

window.addEvent('domready', function(){ 
    $('my_form').addEvent('submit', function(e){ 
      e.stop(); 
    this.set('send', { 
       onComplete: function(response){ 
    var data = JSON.decode(response); 
    inject_row($('my_table_body'), data); 
       } 
      }); 
    var valid_form = true; 
      $$('#my_form input').each(function(item){ 
      if(item.value == '') valid_form = false; 
      }); 
    if(valid_form) { 
       this.send(); 
      } else { 
       alert('Fill in all fields'); 
      } 

     }); 
    var inject_row = function(table_body, data){ 
    var row_str = '<tr width="100%">'; 
      data.each(function(item, index){ 
       row_str += '<td>'+item+'</td>'; 
      }); 
      row_str += '<td><input type="submit" name="deleterow" id="deleterow" value="Delete" /></td></tr>'; 
    var newRow = htmlToElements(row_str); 
    newRow.inject(table_body); 

     } 
    var htmlToElements = function(str){ 
      return new Element('div', {html: '<table><tbody>' + str + '</tbody></table>'}).getElement('tr'); 
     } 

    });

PHP

<?php 

/** 
    * If nothing is being posted to this script redirect to 
    * our HTML page. 
    */ 
if(! $_POST){ 
    header('Location: newquote.php'); 
} 

// create an empty array for our results 
$results = array(); 

/** 
    * Stick the values from _POST into our results array 
    * while also stripping out any html tags 
    * 
    * This is where you would perform any required processing 
    * of the form data such as server side validation or updating 
    * a database. 
    */ 
foreach($_POST as $field){ 
    $results[] = strip_tags($field); 
} 

// Echo our results as a JSON encoded string. 
echo json_encode($results); 

?>

Quelle

2009-07-28 Anonymous

„fügen Sie eine Löschtaste zur letzten colum jeder Zeile so dass der Benutzer eine einzelne Zeile löschen“ - Bewahren Sie die Datenserver-Seite ? Wo findet dieser Löschvorgang statt? Serverseitig? Client-Seite? Beide? – VolkerK

Nö nichts ist SS gespeichert - und die Operation würde CS stattfinden.Das Hinzufügen einer Löschschaltfläche ist ziemlich einfach und gibt der Zeile eine eindeutige ID, so dass der Benutzer nur die entsprechende Zeile löschen kann, wenn die Löschschaltfläche gedrückt wird. Danke fürs schauen. –

Bifter, Sie brauchen keine IDs. Wenn eine Taste gedrückt wird, gehe einfach das DOM zum nächsten TR-Element und "lösche" es ... – James

Ich stimme mit J-P überein, es klingt wie Sie brauchen keine eindeutige ID hier.
Da die Frage mit "jquery" markiert ist, schlage ich vor, die live event binding, z.

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $(".deleterow").live("click", function() { 
      $(this).parents("tr:first").remove(); 
     }); 
     }); 

     function foo(id) { 
     $("#"+id).append('<tr><td>'+(new Date()).getSeconds()+'</td><td>x</td><button class="deleterow">delete</button></td></tr>'); 
     } 
    </script> 
    </head> 
    <body> 
    <table id="t1"> 
     <tr><td>a</td><td>A</td><td><button class="deleterow">delete</button></td></tr> 
     <tr><td>b</td><td>B</td><td><button class="deleterow">delete</button></td></tr> 
     <tr><td>c</td><td>C</td><td><button class="deleterow">delete</button></td></tr> 
    </table> 
    <button onclick="foo('t1')">add</button> 
    </body> 
</html>

Die Funktion $ (document) .ready() übergeben wird aufgerufen, wenn ... na ja, wie der Name schon sagt, wenn das Dokument (dom) bereit ist.
$ („deleteRow.‚) Lebt (‘Klick“, .... Jedes Mal, wenn ein Klick-Ereignis mit dem CSS-Klasse ‚deleteRow‘ auf ein Element tritt die Funktion als zweiter Parameter übergeben wird aufgerufen, in diesem Fall

function() { 
    $(this).parents("tr:first").remove(); 
}

Wenn die Funktion aufgerufen wird, ist der this-Kontext das Element, in dem das Ereignis aufgetreten ist parents ("tr: first") gibt das erste/"nächste" tr-Element in der Vorfahrenachse des aktuellen Elements zurück.) ist wahrscheinlich selbsterklärend ...

edit: ok, jetzt, wo die jquery-Tag ist weg ....
http://www.jaycarlson.net/blog/2009/04/06/live-events-in-mootools/ zeigt eine Live-Event-Bindung für Mootools. Mit, dass die „neue“ Lösung für das jquery Skript sehr ähnlich ist

window.addEvent('domready', function() { 
    // add an onclick handler for all current and future button elements 
    // within the table id=t1 
    $('t1').addLiveEvent('click', 'button', function(e){ 
    // a button in t1 has been clicked, this=button element 
    // get the "nearest" tr in the parent/ancestor-axis 
    // and remove it 
    $(this).getParent("tr").dispose(); 
    }); 
});

Quelle

2009-07-28 17:39:07 VolkerK

Tut mir leid, Volkerk, muss einen doofen Tag haben, weil ich nicht sehen kann, wie das in meinen Code passt ... Ich weiß, du hast hier eine Menge Arbeit geleistet, aber ich kann einfach nicht folgen .... –

mach dir keine Mühe, die Antwort ist irrelevant, wie es für jQuery ist. dann wieder, warum wurde diese Frage markiert jquery, jemand sollte es entfernen ... –

Hallo Dimitar Christoff, ich habe das Jquery-Tag entfernt .... können Sie mir mit Ihrem Code helfen? –

Dies sollte einzigartig genug für dieses Projekt sein:

var newDate = new Date; 
var id = newDate.getTime();

Dann wäre es nur eine Frage die sei es die Zeile in der Schleife hinzugefügt und es zu einem Löschknopf verbindet.

Quelle

2009-07-28 16:38:23 Mike

Ich verwende immer die PHP-Funktion uniqid(). Es generiert eine eindeutige ID basierend auf der Zeit in Mikrosekunden. PHP Documentation.

Sie könnten Ihre Ergebnisse in PHP durchlaufen und das Ergebnis von uniqid() zu jedem Ergebnis hinzufügen, bevor Sie json_encode() verwenden.

Quelle

2009-07-28 16:59:45

Erstellen Sie Zeile ID für dynamische JS-Tabelle

Antwort

Verwandte Themen