CODEWITHSUNDEEP
javascriptjqueryhtml
Saranga
Saranga

Reputation: 520

how to get value from dropdown inside an html table cel

I'm trying to retrieve value of dropdown in side an html table dynamically. This is my html

<tr>
 <td>ITMF-502</td>
 <td>PUMA</td>
 <td>1</td>
 <td>0</td>
 <td>HALF FRAME/ METAL/ NB/ LOW PRICE</td><td>KOTTAWA</td>
 <td>
  <select name="loc" id="location0" class="form-control">
   <option value="BR000002">KOTTAWA</option>
   <option value="BR000007">NEGOMBO</option>
  </select>
 </td>
</tr>

this is my java script

var table = document.getElementById('Items');
var tableRowCount = $("#Items > tbody > tr").length;
for (var i = 1; i <= tableRowCount; i++) {
    var obj = {
        itemCode: table.rows.item(i).cells[0].innerText,
        currentLocation: table.rows.item(i).cells[5].innerText,
        newLocation: table.rows.item(i).cells[6].find("select").val()
    };
    items.push(obj);
}

But it doesn't happen.Anybody can tell how can i access that value. I need to access value, not text.

Upvotes: 1

Views: 5774

Answers (2)

Altmish-E-Azam
Altmish-E-Azam

Reputation: 1583

try below code

HTML

<tr>
 <td>ITMF-502</td>
 <td>PUMA</td>
 <td>1</td>
 <td>0</td>
 <td>HALF FRAME/ METAL/ NB/ LOW PRICE</td><td>KOTTAWA</td>
 <td>
  <select name="loc" id="location0" class="form-control">
   <option value="BR000002">KOTTAWA</option>
   <option value="BR000007">NEGOMBO</option>
  </select>
 </td>
</tr>

JavaScript:

var tableRowCount = document.getElementById('location0').length;;
for (var i = 0; i < tableRowCount; i++) {
    alert(document.getElementById('location0')[i].value);
}

Upvotes: 2

Radek Pech
Radek Pech

Reputation: 3098

I think the base problem is that your FOR ignores first row (the one with index 0). Also you add into items array that does not exist...

This is improved jQuery version:

var items = [],
    table = $(document.getElementById('Items')),
    tableRows = table.find('tr'),
    obj,
    tableRow;

for (var i = 0; i < tableRows.length; i++) {
    tableRow = tableRows.eq(i);

    obj = {
        itemCode: tableRow.find('td').first().text(),
        currentLocation: tableRow.find('td').eq(5).text(),
        newLocation: tableRow.find("select").val()
    };
    items.push(obj);
}

console.log(items);

Upvotes: 0

Related Questions