Как получить все значения (input, select) из таблицы в форме?

Question

У меня есть таблица, и я добавляю строки, клонируя ее. Я хочу знать, есть ли какой-нибудь способ, которым я могу получить все входные и выпадающие значения из моей таблицы (использование form.serialize () даст мне ненужные значения, которые мне не нужны)

HTML

<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
  <thead>

    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
      <td class="headingalign" width="05%"></td>

    </tr>
  </thead>
  <tbody>

    <tr id="id0" class="vals" name="id0">

      <td>
      <div class="id_100">
    <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
        <option value="S">Select</option>
        <xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
            <xsl:sort order="ascending" select="description"/>
            <option value="#{description}">
                <xsl:value-of select="description"/>
            </option>
        </xsl:for-each>
        </select>
     </div> </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500"  disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}"  />

      </td>
      <td>
        <input  id="fldimg" name="fldimg" maxlength="50"  disabled="true" class="objinputtext2" size="45" value="{//RESPONSE}"  />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="{//RESPONSE}"  />

      </td>
      <td>
      <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Вы можете перебирать все элементы ввода и выбора из таблицы и читать значения, используя метод .val().

См. Ниже фрагмент кода

$(function(){
    var data = {};
    $('#dataTable input,select').each(function(){
       var id= $(this).attr('id');
       var val = $(this).val();
       data[id]=val;
    });
    console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
  <thead>

    <tr>
      <td class="headingalign" width="16%">Links</td>
      <td class="headingalign" width="32%">Desciption</td>
      <td class="headingalign" width="16%">Image</td>
      <td class="headingalign" width="16%">URL</td>
      <td class="headingalign" width="05%"></td>

    </tr>
  </thead>
  <tbody>

    <tr id="id0" class="vals" name="id0">

      <td>
      <div class="id_100">
    <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
        <option value="S">Select</option>
        <xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
            <xsl:sort order="ascending" select="description"/>
            <option value="#{description}">
                <xsl:value-of select="description"/>
            </option>
        </xsl:for-each>
        </select>
     </div> </td>
      <td>
        <input id="flddesc" name="flddesc" maxlength="500"  disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}"  />

      </td>
      <td>
        <input  id="fldimg" name="fldimg" maxlength="50"  disabled="true" class="objinputtext2" size="45" value="{//RESPONSE}"  />

      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="{//RESPONSE}"  />

      </td>
      <td>
      <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
      </td>
    </tr>
  </tbody>
</table>