为动态 JS 表创建行 ID答案

【问题标题】：Create row ID for dynamic JS Table为动态 JS 表创建行 ID
【发布时间】：2009-07-28 15:55:56
【问题描述】：

我有一个工作脚本，用户在表单上完成输入，当他们提交表单时，表单输入的内容作为表格行输入。

有什么办法吗，我认为在 JS 中使每一行都有一个唯一的 ID，并在每行的最后一列添加一个删除按钮，以便用户可以删除单个行。

感谢您挽救了生命！！！！

HTML 表单

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

?>

【问题讨论】：

“在每行的最后一列添加一个删除按钮，以便用户可以删除单个行” - 您是否在服务器端存储数据？这个删除操作发生在哪里？服务器端？客户端？两者都有？
不存储任何东西 SS - 并且操作将发生在 CS。添加删除按钮非常简单，它为行提供唯一的 id，因此用户只能在按下删除按钮时删除相应的行。感谢收看。
Bifter，您不需要任何 ID。当按下按钮时，只需向上遍历 DOM 到最近的 TR 元素并“删除”它...
嗨，J-P，感谢您的回答，JS 不是我的强项——您能在我上面的代码中展示吗？
只需在 TD 中放置一个类似的链接，然后执行 $$("a.remove").addEvent("click", function( e) { new Event(e).stop(); this.getParent().dispose(); });如果在一个 div 中是一个 td 的孩子，显然这样做 this.getParent().getParent().dispose();以 TR 为目标。

标签： php javascript html mootools

【解决方案1】：

我同意 J-P 的观点，听起来您在这里不需要唯一 ID。
由于问题被标记为“jquery”，我建议使用live event binding，例如

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

传递给 $(document).ready() 的函数在......好吧，正如名称所述，当文档 (dom) 准备好时被调用。
$(".deleterow").live("click", ... : 每当在具有 css 类 "deleterow" 的元素上发生单击事件时，都会调用作为第二个参数传递的函数。在这种情况下

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

当函数被调用时，this-context 是事件发生的元素。 parents("tr:first") 返回当前元素的祖先轴中的第一个/“最近的”tr 元素。 remove() 可能是不言自明的......

编辑： 好的，现在 jquery 标记不见了......
http://www.jaycarlson.net/blog/2009/04/06/live-events-in-mootools/ 显示了 mootools 的实时事件绑定。使用“新”解决方案与 jquery 脚本非常相似

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

【讨论】：

抱歉，VolkerK，一定是度过了愚蠢的一天，因为我看不出这如何适合我的代码……我知道你在这里做了很多工作，但我就是无法跟上……跨度>
别打扰，回复是无关紧要的，因为它是针对 jquery 的。再说一遍，为什么这个问题被标记为 jquery，有人应该删除它......
嗨 Dimitar Christoff，我已经删除了 jquery 标签....你能帮我写代码吗？
没意义，支持 volkerk 的解决方案，虽然现场活动可能是矫枉过正，除非桌子真的很大。
但它可以将代码量减少到即使以前从未使用过 mootools 的人（比如我 ;-)）也能理解它的大小......或者很容易在文档中查找它。

【解决方案2】：

这对于这个项目来说应该足够独特：

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

然后只需将其添加到循环中的行并将其链接到删除按钮即可。

【讨论】：

【解决方案3】：

我总是使用 php 函数uniqid()。它根据时间（以微秒为单位）生成一个唯一的 ID。 PHP Documentation.

在使用json_encode() 之前，您可以在PHP 中循环遍历结果并将uniqid() 的结果添加到每个结果中。

【讨论】：