Выделите текст в HTML-таблице с помощью Javascript - PullRequest
Новая
       0

Выделите текст в HTML-таблице с помощью Javascript

0 голосов
/ 24 декабря 2010

У меня есть HTML-таблица с полем «select_tag», и я хочу, чтобы другое поле получало выбранную опцию, а затем умножалось на другое число, чтобы цена отображала итог.Вот таблица: 

<table>
    <tr>
        <td>(select_tag)</td>
        <td>price</td>
        <td>total</td>
    </tr>
</table>

Как бы я это сделал?

Ответы [ 4 ]

1 голос
/ 24 декабря 2010

Мой ответ похож на @ pythonFoo, но я принял статическую цену и отделил JS от HTML:

HTML: 

<table>
    <tr>
        <td>
            <select id="quantity">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="5">5</option>
            </select>
        </td>
        <td>price: <span id="price">$2.50</span></td>
        <td>total: <span id="total">$2.50</span></td>
    </tr>
</table>

JavaScript (опять же, принимает значение в«цена» постоянна, и вы просто выбираете «количество». Если это не так, пожалуйста, уточните свой вопрос): 

var quantitySelect = document.getElementById("quantity");
var priceStr = document.getElementById("price").innerHTML;
var price = parseFloat(priceStr.substring(1), 10);

quantitySelect.onchange = function() {
    var quantity = parseInt(this.value, 10);
    var total = document.getElementById("total");
    var computedTotal = price * quantity;

    total.innerHTML = "$" + computedTotal.toFixed(2);
};

Вы бы включили JavaScript в тег <head>Ваша страница под тегом <script type="text/javascript">.

См. рабочий пример здесь: http://jsfiddle.net/andrewwhitaker/agepm/

0 голосов
/ 24 декабря 2010

Это - самый простой способ подумать ... моя функция поддерживает несколько TR и не использует идентификаторы или jQuery ... и т. Д. (Хотя я бы предпочел jQuery)

0 голосов
/ 24 декабря 2010

Ради интереса, посмотрите мою библиотеку Calctastic (изначально написанную более 7 лет назад!).Первый пример использует select и автоматически обновляет другое поле при его изменении.

0 голосов
/ 24 декабря 2010

Я не понял, умножить на что, но если вы хотите умножить на количество, как предполагает «общее», этот код должен работать: 

<script type="text/javascript">
price = [];
price[0] = 10000;
price[1] = 20000;
price[2] = 30000;
price[3] = 40000;
</script>
<table>
    <tr>
        <td><select id="select" onchange="document.getElementById('price').innerHTML = price[document.getElementById('select').value]; document.getElementById('total').innerHTML = price[document.getElementById('select').value] * document.getElementById('qt').value; ">
  <option value="0">Volvo</option>
  <option value="1">Saab</option>
  <option value="2">Mercedes</option>
  <option value="3">Audi</option>
</select></td>
    <td>
        <input type="text" id="qt" onchange="document.getElementById('total').innerHTML = price[document.getElementById('select').value] * document.getElementById('qt').value;" value="1">
    </td>
        <td id="price">Price</td>
        <td id="total">total</td>
    </tr>
</table

В цене массива есть цены. В поле выбора выберите элементы с идентификатором массива, а в поле ввода - количество элементов. Это основа, поэтому она не контролирует значение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...