jQuery map() table with input fields

Question

I have a table where the first two cells are inputfields, and I'm trying to map all of the table data inside an array. But I don't know how to get the data from the input fields right know it only maps the the other data.

JSFiddle

    <table width="100%">
  <thead>
    <tr>
      <td><strong>Amount</strong></td>
      <td><strong>Price</strong></td>
      <td><strong>Articleid</strong></td>
      <td><strong>Descr</strong></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="amount" type="text" value="1"></td>
      <td><input class="purchprice" type="text" value="2.00"></td>
      <td>210003</td>
      <td>Example_1</td>
    </tr>
    <tr>
      <td><input class="amount" type="text" value="1"></td>
      <td><input class="purchprice" type="text" value="19.25"></td>
      <td>128025</td>
      <td>Example_2</td>
    </tr>
    <tr>
      <td><input class="amount" type="text" value="3"></td>
      <td><input class="purchprice" type="text" value="23.45"></td>
      <td>124005</td>
      <td>Example_3</td>
    </tr>
    </tbody>
</table>

jQuery

<button type="button" class="map">Map table</button>

$('.map').on('click', function() {

  var tableData = $('table tbody td').map(function() {
    return $(this).text();
  }).get();

  console.log($.trim(tableData[0]));
  console.log($.trim(tableData[1]));
  console.log($.trim(tableData[2]));
  console.log($.trim(tableData[3]));

});

return $(this).is(':has(:input)')?$(':input',this).val():$(this).text(); — Pranav C Balan
– Pranav C Balan, Commented Apr 26, 2016 at 7:02

Pranav C Balan · Accepted Answer · 2016-04-26 07:09:02Z

1

Check td contains input field in map() and return value based on it.

var tableData = $('table tbody td').map(function() {
  return $(this).is(':has(:input)') ? // check td contains input 
    $(':input', this).val() : // if contains return it's value
    $(this).text(); // else return text content
}).get();

edited Apr 26, 2016 at 7:09

answered Apr 26, 2016 at 7:03

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ibrahim Khan · Accepted Answer · 2016-04-26 07:03:40Z

0

Check for input in td like following.

$('.map').on('click', function () {
    var tableData = $('table tbody td').map(function () {
        var input = $('input', this);
        return input.length > 0 ? input.val() : $(this).text();
    }).get();

    console.log($.trim(tableData[0]));
    console.log($.trim(tableData[1]));
    console.log($.trim(tableData[2]));
    console.log($.trim(tableData[3]));
});

answered Apr 26, 2016 at 7:03

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2016-04-26 07:06:06Z

0

Try to check the the tag name inside of .map

$('.map').on('click', function() {

  //combine input elements and tds with no inputs
  var tableData = $('table tbody td:not(:has(input)),table tbody td input').map(function() {
    //check the tagName and perform relevant action.
    return this.tagName == "INPUT" ? this.value : this.textContent;
  }).get();

  console.log($.trim(tableData[0]));
  console.log($.trim(tableData[1]));
  console.log($.trim(tableData[2]));
  console.log($.trim(tableData[3]));
});

answered Apr 26, 2016 at 7:06

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Collectives™ on Stack Overflow

jQuery map() table with input fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related