如何使用递增的tr和td id遍历表行并使用jQuery获取所有单元格值

时间:2019-12-19 07:19:05

标签: javascript jquery html

我有一张桌子,我在其中通过克隆现有行来添加新行。我也想获取所有单元格值(输入字段),包括我的下拉值(选择字段)。我已经尝试过,但这似乎不起作用。任何帮助将不胜感激。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="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="row">
      <td>
        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()">

          <option value="">Select</option>
          <xsl:for-each select="faml/response/quicklinkresponsedto/searchby/datamapdto">
            <xsl:sort order="ascending" select="description" />
            <option value="{code}">
              <xsl:value-of select="description" />
            </option>
          </xsl:for-each>
        </select>
      </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="35" value="{//RESPONSE}" />
      </td>
      <td>
        <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext3" size="35" value="{//RESPONSE}" />

      </td>
      <td>
        <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
      </td>
    </tr>
  </tbody>
</table>
<div class="buttonarea">
  <ul>
    <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
    <li><input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();" /></li>
  </ul>
</div>
foo@gmail.com

1 个答案:

答案 0 :(得分:0)

您可以使用serializeArray。在表格中添加表格。

喜欢

<form name="graphtable" id="graphtable">

  table data

</form>

点击提交按钮后,使用serializeArray函数获取数组中所有表单元素的值。

function fnOnSubmit() {

  var formvalue = $( "#graphtable" ).serializeArray();
  jQuery.each(formvalue, function(i, formvalue){

      alert(formvalue.name+':'+formvalue.value);

  });
}