如何使用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') 像这样。.not('thead tr, tfoot tr') 然后用以下方法排除复选框的输入 not() 在你 each() 功能 tb.find('input').each() 像这样 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>