如何使用html中的行整数在javascript中分配或附加唯一ID

我有一行具有唯一ID的表单和它自己的提交按钮。我使用for循环来获取我的行。 对于（$i=0；$i 下面是html输出示例

在我的javascript中，我需要#loading和#result来引用html中唯一的id=“loading（int）”以便消息显示在该行的旁边

起初，我让div id=“loading”和div id=“result”在表的每一行中都不包含整数，但消息“Saved”只会显示在我的第一行（它找到该id的第一个位置）。我需要我的ID是唯一的，但如何将它们附加到javascript中

我需要一些js方面的指导。。。我试图：

var rows = getElementsByClassName('reply_form');
for (var i=0, ii=rows.length; i<ii; i++)
rows[i]


var loading = $('#loading').attr('value');
$('#loading').prepend(""+loading+"");

var rows=getElementsByClassName（'reply_form'）；
对于（var i=0，ii=rows.length；i我不肯定我理解这个问题，但似乎您想参考提交的表单，并仅处理那些#结果和#加载div？如果是的话

在success函数中，检索使用jQuery启动事件的DOM元素，然后将其附加到每个#加载和#结果div

    $(document).ready(function() {
       $('.reply_form').submit(function(event) {
         currentId = event.delegateTarget.id;          
         $.ajax({
             type: 'POST',
             url: 'form.php',
             data: $(this).serialize(),
             cache: false,       
              beforeSend: function() {
                $('#loading'+currentId).show();
                $('#result'+currentId).hide();
            },
         success: function(data) {
              if(data==1) {
                  $('#loading'+currentId).hide();
                  $('#result'+currentId).fadeIn('slow').html("ok");
                  $('#result'+currentId).addClass('true');
                  $(this).slideUp(1000);
               }
             else {
                $('#loading'+currentId).hide();
                $('#result'+currentId).fadeIn('slow').html(data);
                $('#result'+currentId).addClass('errors');
             }  
      }    
    });

     return false;
  });

}):

假设表单的id与其结果和加载div之间存在关系，那么这应该是可行的
 Sloga，对于这种类型的东西，您不需要单独的表单，而且在大多数情况下，您应该使用类而不是ID

诀窍是将单击处理程序附加到提交按钮，然后在处理程序中与
this
（单击的按钮）相对应地工作，以查找所有相关元素。这样，就不需要ID了

HTML将如下所示：

<table id="reply_table">

<tbody>
<tr>
<td><b>Room</b><br />207</td>
<td>
    <input type="hidden" name="_method" value="PUT" />
    <input type="hidden" name="data[_Token][key]" value="977ceaa782a964fe9a3f5a1cb3d7d422e8470af9" id="Token108437306" />
    <input type="hidden" name="data[Report][id]" value="184463" />
    <input type="hidden" name="data[Report][area]" value="1" />

    <input name="data[Report][tables1]" type="text" class="inputbox" size="3" value="0" id="ReportTables1" />
</td> 
<td><input name="data[Report][chairs1]" type="text" class="inputbox" size="3" value="0" id="ReportChairs1" /></td>
<td><input name="data[Report][comments1]" type="text" size="20" value="" id="ReportComments1" /></td>
<td>
    <div><button class="submit">Submit</button></div>
    <div class="loading" style="display: none;">Saved</div>
    <div class="result" style="display: none;"></div>
</td>
</tr>
</tbody>

</table>

$(function() {
    $('#reply_table').on('click', "button.submit", function() {
        var $tbody = $(this).closest("tbody");//find relevant tbody relative to the clicked button
        var $loading = $tbody.find('.loading').show();//find the relevant "loading" div and show it.
        var $result = $tbody.find('.result').hide();//find the relevant "result" div and hide it.

        $.ajax({
            type: 'POST',
            url: '/reports/addcounts/',
            data: $tbody.find("input").serialize(),
            cache: false,
            success: function(data) {
                $loading.hide();
                if(data==1) {
                    $result.html('ok').addClass('true').fadeIn('slow', function() {
                        $tbody.slideUp(1000);
                    });
                }
                else {
                    $result.html(data).addClass('errors').fadeIn('slow');
                }
            }
        });
        return false;
    });
});

未经测试

我不确定
tbody
元素是否会在所有浏览器中滑动。你可能需要妥协，改为
.hide（）
。
我想你会发现HTML是无效的<代码>

应仅包含

元素（及其合法后代）。表单可以包装整个表，也可以在表单元格中包含一个表单，但中间不包含任何内容。有些doctype可以容忍

…

，但不能保证。谢谢…我会努力修复html，但我仍然需要找出如何将php中的整数$I附加到javascript中的id。谢谢，这很有帮助。我一直在寻找合适的语法将Id附加到$（'#load'）等中。因此，$（'#load'+currentId）非常有用。我没有成功使用：currentId=event.delegateTarget.id；所以我把它改为currentId=$（this.attr（“id”）；并保留了$（'reply_form'）。submit（function（）。我要保存它，显示div加载（更好地写为“saving”）和slideUp工作。#结果有问题。我计划在成功和slideUp后在提交按钮旁边添加一个复选标记，以便向用户显示行已提交并保存到数据库。

<table id="reply_table">

<tbody>
<tr>
<td><b>Room</b><br />207</td>
<td>
    <input type="hidden" name="_method" value="PUT" />
    <input type="hidden" name="data[_Token][key]" value="977ceaa782a964fe9a3f5a1cb3d7d422e8470af9" id="Token108437306" />
    <input type="hidden" name="data[Report][id]" value="184463" />
    <input type="hidden" name="data[Report][area]" value="1" />

    <input name="data[Report][tables1]" type="text" class="inputbox" size="3" value="0" id="ReportTables1" />
</td> 
<td><input name="data[Report][chairs1]" type="text" class="inputbox" size="3" value="0" id="ReportChairs1" /></td>
<td><input name="data[Report][comments1]" type="text" size="20" value="" id="ReportComments1" /></td>
<td>
    <div><button class="submit">Submit</button></div>
    <div class="loading" style="display: none;">Saved</div>
    <div class="result" style="display: none;"></div>
</td>
</tr>
</tbody>

</table>

$(function() {
    $('#reply_table').on('click', "button.submit", function() {
        var $tbody = $(this).closest("tbody");//find relevant tbody relative to the clicked button
        var $loading = $tbody.find('.loading').show();//find the relevant "loading" div and show it.
        var $result = $tbody.find('.result').hide();//find the relevant "result" div and hide it.

        $.ajax({
            type: 'POST',
            url: '/reports/addcounts/',
            data: $tbody.find("input").serialize(),
            cache: false,
            success: function(data) {
                $loading.hide();
                if(data==1) {
                    $result.html('ok').addClass('true').fadeIn('slow', function() {
                        $tbody.slideUp(1000);
                    });
                }
                else {
                    $result.html(data).addClass('errors').fadeIn('slow');
                }
            }
        });
        return false;
    });
});