Как исключить thead, tfoot и input [type = checkbox] из HTML, используя jquery?

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>