如何從表格中的表格中獲取所有值（輸入，選擇）？

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>