如何在jQuery中访问HTML元素'

How to access a part of HTML element's Id in jQuery?

本文关键字：元素 HTML 访问 jQuery      更新时间：2023-09-26

我有一个下面的HTML代码表:

    <table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
                          <thead>
                            <tr>
                              <th style="vertical-align:middle">Products</th>
                              <th style="vertical-align:middle">Pack Of</th>
                              <th style="vertical-align:middle">Quantity</th>
                              <th style="vertical-align:middle">Volume</th>
                              <th style="vertical-align:middle">Unit</th>
                              <th style="vertical-align:middle">Rebate Amount</th>
                            </tr>
                          </thead>
                          <tbody class="apnd-test">
    <tr id="reb1_1">
    <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
                              <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
                              <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
    </tr>
                          </tbody>
<tfoot>
                        <tr id="reb1_2">
                          <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>

<td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  </tfoot>
</table>

和我下面的jQuery代码在上面的表:

    $(document).ready(function() {
    $('.products').click(function () {
        var new_row = $('#reb1').clone();
        /*Here I want to use the id as #blacklistgrid_1. As the there may be more than one tables present the ids could be #blacklistgrid_2, #blacklistgrid_3, and so on. So it should be dynamic not static for value 1*/
        var tbody = $('tbody', '#blacklistgrid');
/*And in this line too, I want to access the tr and t body of that table with specific id only*/
        var n = $('tr', tbody).length  + 1;
        new_row.attr('id', 'reb' + n);
        $(':input', new_row).not('.prod_list').remove();
        //new_row.find("td:eq(1)").html();
        $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
        tbody.append(new_row);
        $('.delete').on('click', deleteRow);
       });
    });

我已经在上面的代码中以注释的形式写了我的需求。所以请有人帮助我实现这个目标。谢谢你。

你可以让你的代码 id 以 blacklistgrid

开头
$('[id^= blacklistgrid_]') // here you can access all elements whose id starts 
                          // with backlistgrid_

和访问它们特定的子元素

$('[id^= blacklistgrid_]>td')

别人试图在评论中解释什么，

这里使用class选择器，你将访问它们的id

$.each('.table', function () {  // iterate all the table elements
    var id = $(this).prop('id');
    if (id === "blacklistgrid_1") {  // check for the ids
        //Perform ToDos
        var tds = $(this).find('td');
        // using tds perform its ToDos
    }
});
相关文章：