javascript - jQuery to iterate through table and select dropdown lists - Stack Overflow

admin管理员组

文章数量:1328972

I have what I thought would be a simple task.

A table of drop down lists, and a text box at the end of each line.

All I want to do is loop through each row of the table, get the "hours dropdown value" and multiply by the "rate dropdown value" - and place the result in the text box.

I just keep getting undefined when trying to get the dropdownlist values.

My HTML is:

<table class="hours-table">
<tr>
    <th>Hours</th>
    <th>Hourly Rate</th>
    <th>Date Total</th>
</tr>
<tr>
    <td>
        <select id="HoursSelected1" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected1" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
<tr>
    <td>
        <select id="HoursSelected2" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected2" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
<tr>
    <td>
        <select id="HoursSelected3" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected3" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
</table>
<p><a class="calculate" href="#" title="calculate row">Calculate</a>

</p>

My jQuery is:

$(document).ready(function () {
$('.calculate').on('click', function () {
    $('.hours-table tr').each(function () {
        var hours = $(this).find('select.hours').val();
        var rate = $(this).find('select.rate').val();
        var dateTotal = (hours * rate);
        $(this).find('input.date-total').val(dateTotal);
    }); 
    return false;
}); 
});

Can anyone see where I've gone wrong please? There is a fiddle here: /

Thank you, Mark

I have what I thought would be a simple task.

A table of drop down lists, and a text box at the end of each line.

All I want to do is loop through each row of the table, get the "hours dropdown value" and multiply by the "rate dropdown value" - and place the result in the text box.

I just keep getting undefined when trying to get the dropdownlist values.

My HTML is:

<table class="hours-table">
<tr>
    <th>Hours</th>
    <th>Hourly Rate</th>
    <th>Date Total</th>
</tr>
<tr>
    <td>
        <select id="HoursSelected1" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected1" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
<tr>
    <td>
        <select id="HoursSelected2" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected2" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
<tr>
    <td>
        <select id="HoursSelected3" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected3" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
</table>
<p><a class="calculate" href="#" title="calculate row">Calculate</a>

</p>

My jQuery is:

$(document).ready(function () {
$('.calculate').on('click', function () {
    $('.hours-table tr').each(function () {
        var hours = $(this).find('select.hours').val();
        var rate = $(this).find('select.rate').val();
        var dateTotal = (hours * rate);
        $(this).find('input.date-total').val(dateTotal);
    }); 
    return false;
}); 
});

Can anyone see where I've gone wrong please? There is a fiddle here: http://jsfiddle/Lr5pq/26/

Thank you, Mark

• javascript
• jquery

Share Improve this question Follow asked Feb 18, 2014 at 14:27 MarkMark 7,8282626 gold badges9292 silver badges148148 bronze badges 1

• 1 Seems okay..whats the issue? – Deepak Ingole Commented Feb 18, 2014 at 14:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You have 2 problem in your code, first is neglecting the first row (the header row in the table) in your calculation, second using return false; which is deprecated and we use e.preventDefault();, instead, you can fix them like:

        $('.hours-table tr').each(function () {
            var hours = $(this).find('select.hours').val();
            var rate = $(this).find('select.rate').val();
            if (hours !== undefined && rate !== undefined) {
                var dateTotal = (hours * rate);
                $(this).find('input.date-total').val(dateTotal);
            }
        });
        e.preventDefault();

BTW, if I were I would changed it like:

$(document).ready(function () {
    $('.calculate').on('click', function (e) {
        $('.hours-table tr').each(function () {
            var hours = $(this).find('select.hours>option:checked').val();
            var rate = $(this).find('select.rate>option:checked').val();

            //this is for your header row
            if (hours !== undefined && rate !== undefined) {
                var dateTotal = (hours * rate);
                $(this).find('input.date-total').val(dateTotal);
            }
        });
        e.preventDefault();
    });
});

as you see, we can use :checked instead of :selected, to select the selected option in a select node.

and it is your working jsfiddle

Try this:

$(document).ready(function () {
$('.calculate').on('click', function () {
    $('.hours-table tr').each(function () {
        var hours = $(this).find('select.hours > option:selected').val();
        var rate = $(this).find('select.rate > option:selected').val();
        var dateTotal = (hours * rate);
        $(this).find('input.date-total').val(dateTotal);
    }); 
    return false;
}); 
});

本文标签： javascriptjQuery to iterate through table and select dropdown listsStack Overflow