如何使用 jquery 从 HTML 中排除 thead、tfoot 和 input[type=checkbox]？

Question

我正在从下表生成 JSON。目前，我可以排除<thead>，但我想排除<tfoot> 和输入类型复选框或输入类型为复选框的每一行的第一个单元格使用JQuery 任何提示？

$('#createJSON').click(function() {
    $('#main-div .component-base').each(function() {
        console.log(this);
        // console.log($(this));
  if ($(this).data('component-type') == 'aggregator') {
            console.log('Process Agg');
            var newFormData = [];
            jQuery('#aggregator-table tr')
                .not('thead tr')

            .each(function(i) {
                var tb = jQuery(this);
                console.log(tb);
                var obj = {};
                tb.find('input').each(function() {
                    obj[this.name] = this.value;
                });
                obj['row'] = i;
                newFormData.push(obj);
            });
            console.log(newFormData);
        } 
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%;" id="createJSON">Create JSON</button>
<div class="main-div" id="main-div">
<table id="aggregator-table" class="component-base" data-component-type="aggregator">
                    <thead>
                        <th colspan="6">Aggregator</th>

                        <tr>
                            <th>Select</th>
                            <th>Column Name</th>
                            <th>Function</th>
                            <th>Alias</th>
                            <th>Order</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="checkbox" name="record" /></td>
                            <td>
                                <input id="column-name" name="column-name" placeholder="Column Name" />
                            </td>
                            <td>
                                <input id="function" name="function" placeholder="Function" />
                            </td>
                            <td>
                                <input id="alias" name="alias" placeholder="Alias" />
                            </td>
                            <td>
                                <input id="order" name="order" placeholder="Order" />
                            </td>
                        </tr>
                        <tr></tr>
                    </tbody>

                    <tfoot>
                        <tr>
                            <td>
                                <button class="add-record" style="margin:
                                        1%;">
                                        Add Properties
                                    </button>
                            </td>
                            <td>
                                <button class="delete-component" style="margin: 1%;">
                                        Delete Table
                                    </button>
                            </td>
                            <td>
                                <button class="delete-record-aggregator" style="margin: 1%;">
                                        Delete Record
                                    </button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
                </div>

Answer 1

您可以通过将<tfoot> <tr> 添加到not() 选择器.not('thead tr') 来排除<tfoot> <tr>，如下所示：.not('thead tr, tfoot tr') 并通过在each() 函数tb.find('input').each() 中使用not() 来排除复选框输入，如下所示： tb.find('input:not(input[type="checkbox"])').each().

$('#createJSON').click(function() {
  $('#main-div .component-base').each(function() {
    if ($(this).data('component-type') == 'aggregator') {
      var newFormData = [];
      jQuery('#aggregator-table tr')
        .not('thead tr, tfoot tr')
        .each(function(i) {
          var tb = jQuery(this);
          var obj = {};
          tb.find('input:not(input[type="checkbox"])').each(function() {
            obj[this.name] = this.value;
          });
          obj['row'] = i;
          newFormData.push(obj);
        });
      console.log(newFormData);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%;" id="createJSON">Create JSON</button>
<div class="main-div" id="main-div">
  <table id="aggregator-table" class="component-base" data-component-type="aggregator">
    <thead>
      <th colspan="6">Aggregator</th>

      <tr>
        <th>Select</th>
        <th>Column Name</th>
        <th>Function</th>
        <th>Alias</th>
        <th>Order</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="record" /></td>
        <td>
          <input id="column-name" name="column-name" placeholder="Column Name" />
        </td>
        <td>
          <input id="function" name="function" placeholder="Function" />
        </td>
        <td>
          <input id="alias" name="alias" placeholder="Alias" />
        </td>
        <td>
          <input id="order" name="order" placeholder="Order" />
        </td>
      </tr>
      <tr></tr>
    </tbody>

    <tfoot>
      <tr>
        <td>
          <button class="add-record" style="margin:
                                        1%;">
            Add Properties
          </button>
        </td>
        <td>
          <button class="delete-component" style="margin: 1%;">
            Delete Table
          </button>
        </td>
        <td>
          <button class="delete-record-aggregator" style="margin: 1%;">
            Delete Record
          </button>
        </td>
      </tr>
    </tfoot>
  </table>
</div>