Dinamik JS Tablo için satır kimliği oluşturmak

3 Cevap php

Ben kullanıcı form üzerindeki girişleri tamamlıyor komut çalışma var ve onlar formu ve form girişlerinin içerik göndermek zaman bir tablo satır olarak girilir.

Ben her satır benzersiz bir kimliği var ve kullanıcı tek bir satır silebilirsiniz böylece her satırın son sütunu için bir silme düğmesi eklemek yapmak için JS içinde düşünmek, herhangi bir yolu var mı.

Bir hayat kurtardığınız için teşekkürler!!

HTML Form

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


JS

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 );

?>

3 Cevap

I agree with J-P, it sounds like you don't need an unique id here.
Since the question is tagged "jquery" I suggest using the live event binding, e.g.

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

The function passed to $(document).ready() is invoked when ...well, as the name states, when the document (dom) is ready.
$(".deleterow").live("click", ... : Whenever a click event occurs on an element with the css class "deleterow" the function passed as second parameter is invoked. In this case

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

Fonksiyon çağrıldığı zaman bu-bağlam olay meydana unsurdur. anne ("tr: first") geçerli öğenin atası-eksenindeki ilk / "en yakın" tr öğeyi döndürür. ) muhtemelen kendi kendini açıklayan bir (kaldırın ...

edit: ok, now that the jquery tag is gone....
http://www.jaycarlson.net/blog/2009/04/06/live-events-in-mootools/ shows a live-event binding for mootools. Using that the "new" solution is quite similar to the jquery script

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();
  });
});

Bu, bu proje için yeterli benzersiz olmalıdır:

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

Sonra sadece döngü içinde o satır ekleyerek ve silme düğmesini bağlayarak bir mesele olacaktır.

Ben her zaman php fonksiyonunu uniqid() kullanın. Bu mikrosaniye zamana dayalı benzersiz bir kimliği oluşturur. PHP Documentation.

PHP içinde sonuçları döngü olabilir ve json_encode() kullanmadan önce her sonuca uniqid() sonucunu ekleyin.