Comment exclure thead , tfoot, et input[type=checkbox] du HTML en utilisant jquery ?

Question

Je suis en train de générer du JSON à partir du tableau ci-dessous. Actuellement, je suis capable d'exclure <thead> mais aussi bien que je veuille exclure <tfoot> et le type d'entrée checkbox ou la première cellule de chaque ligne que le type d'entrée est checkbox en utilisant JQuery un indice ?

$('#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

Vous pouvez exclure le <tfoot> <tr> en l'ajoutant à votre not() sélecteur .not('thead tr') comme ça : .not('thead tr, tfoot tr') et exclure l'entrée de la case à cocher en utilisant not() à votre each() fonction tb.find('input').each() comme ça : 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>