CODEWITHSUNDEEP
javascriptjqueryhtml
Saurav
Saurav

Reputation: 29

How can i get values of each column of a table using jQuery?

I have a table with a drop-down(the value of drop-down is coming from local db) menu and i am trying to fetch the values of all the column using jQuery but the code which i am using isn't working.Any help will be appreciated.Thanks. Note:I am using clone method to dynamically add new rows in my table.

jQuery

function fnOnSubmit() {

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

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

  });
}

HTML

<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>
      <div class="id_100">
    <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="{datavalue}">
                <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="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>

Upvotes: 0

Views: 503

Answers (1)

T&#226;n
T&#226;n

Reputation: 1

You can use .each() function after getting the element based on selector:

function fnOnSubmit() {
  $('#dataTable input:not([type=button]),#dataTable select').each(function () {
    console.log(this.name+':'+this.value);
  });
}
<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>
      <div class="id_100">
    <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="{datavalue}">
                <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="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>

Update 1:

function fnOnSubmit() {
  var dropdownValue = $('#dataTable select').val();

  var flag = '';

  $('#dataTable input:not([type=button])').each(function () {
      // prefix the output with "#dropdownvalue" format:
      flag += '#' + dropdownValue + ...
  });

  // outside the loop, if you still want to end with the format, you can:
  flag += '#' + dropdownValue;
}

Update 2:

function fnOnSubmit() {
  $('#dataTable input:not([type=button]),#dataTable select').each(function () {
      if (this.id === 'fldsearch') {
          var dropdownValue = this.value;

          // you can do something with dropdown value here...
      }
  });
}

Upvotes: 1

Related Questions