Расчеты JavaScript в таблице HTML - PullRequest
Новая
       0

Расчеты JavaScript в таблице HTML

5 голосов
/ 08 мая 2011

Я довольно плохо знаком с JavaScript, поэтому я даже не знаю, является ли это правильным языком для такой попытки, но я решил, что попробую. Я прочитал несколько других постов, и я не нахожу что-то, что действительно дает мне представление о том, как это сделать, поэтому я спрашиваю здесь. Все примеры, которые я прочитал, имеют дело с введенными пользователем числами и / или выборами. Но я иду на статичный способ расчета. Я вводю информацию в таблицу в HTML, а JavaScript вычисляет информацию и выводит информацию в ячейку таблицы. Вот код, который у меня есть для таблицы до сих пор (я знаю, что это не совсем лучший способ кодирования, я работаю над этим, я только что наткнулся на этот камень преткновения): 

<table>
<tr><td><font size="2"><strong>Retail Price:</strong></font></td>
<td name = "retailPrice" id="retailPrice"><font size="2"><del>$97.97</del></font></td></tr>

<tr><td><font size="2"><strong>Sale Price:</strong></font></td>
<td><font size="2"><del>$89.97</del></font></td></tr>

<tr><td><font size="3"><strong>Our Price:</strong></font></td>
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">$79.97</font></td></tr>
<tr><td><font size="2"><strong>You Save:</strong></font></td>
<td name = "yourSavings"><font font size="2" color="Red"></font></td></tr></table>

И вот единственный javascript, который я могу составить: 

<script type="text/javascript" >
$(function(){
var add = parseInt($("#retailPrice").val()) + parseInt($("#ourPrice").val());
$("yourSavings").html(add);
}).keyup();
</script>

Я знаю, что, возможно, я действительно неправ, но я думал, что попробую заставить что-то работать, прежде чем просить о помощи. По сути, мне нужен сценарий, чтобы взять значения в ячейке «ourPrice» и разделить их на значение в ячейке «retailPrice», затем вычесть сумму из «1», чтобы получить сохраненный процент, а затем вывести его в ячейку с именем «yourSavings» ». Я надеюсь, что в этом есть смысл. Так что в основном это работает так: 

(1-(ourPrice/retailPrice))

Любая помощь очень ценится.

Ответы [ 4 ]

3 голосов
/ 08 мая 2011

Метод val предназначен для элементов формы, вы хотите использовать text для извлечения необработанного текста из ячеек таблицы. Затем вы должны превратить его во что-то, что анализаторы чисел поймут, удалив нечисловые префиксы: 

function money_to_number(raw) {
    return parseFloat(raw.replace(/.*\$/, ''));
}

Также обратите внимание, что вы хотите parseFloat вместо parseInt, поскольку вы имеете дело с нецелыми значениями. И вы хотите вычесть, а не сложить, чтобы получить экономию.

Вам также понадобится id для ячейки, на которую вы нацеливаетесь, используемый селектор ищет элемент <yourSavings>, а такой вещи нет: 

<td name = "yourSavings" id="yourSavings">
    <font font size="2" color="Red">
    </font>
</td>

И вы захотите выбрать <font> внутри: 

$("#yourSavings font").html(savings);

Итак, ваш окончательный JavaScript должен выглядеть примерно так: 

function money_to_number(raw) {
    return parseFloat(raw.replace(/.*\$/, ''));
}

var retail  = money_to_number($('#retailPrice').text());
var ours    = money_to_number($('#ourPrice').text());
var savings = retail - ours;
$("#yourSavings font").html(savings);

Форматирование savings и преобразование его в проценты оставлено читателю в качестве упражнения.

И живой пример: http://jsfiddle.net/ambiguous/bn7Wg/

1 голос
/ 08 мая 2011

Похоже, у вас хорошее начало.Вероятно, вам больше всего нужен последовательный и надежный способ получить числовое значение из ячеек.В этой серии мыслей я бы определенно рекомендовал сократить количество устаревших стилей HTML, которые вы делаете встраиваемыми.<font> теги и т. П. Слишком тесно связывают презентацию со структурой документа, что затрудняет построение и поддержание отношения данных / представлений.

Итак, давайте немного очистим код и посмотрим, есть ли у нас более понятныйpicture: 

<style>
  .title {
    font-size : 100%;
    font-weight : bold;
  }
  .big {
    font-size : 120%;
  }
  .sale {
    text-decoration : line-through;
  }
  .our {
    color : red;
  }
  .savings {
    color : red;
  }
</style>
<table>
  <tr>
    <td class="title">Retail Price:</td>
    <td class="price retail" id="retailPrice">$97.97</td>
  </tr>
  <tr>
    <td class="title">Sale Price:</td>
    <td class="price sale" id="salePrice">$89.97</td>
  </tr>
  <tr>
    <td class="big title">Our Price:</td>
    <td class="price our big" id="ourPrice">$79.97</td>
  </tr>
  <tr>
    <td class="title">You Save:</td>
    <td class="savings" id="yourSavings"></td>
  </tr>
</table>

Ага, теперь у нас есть четкая структура документа и хороший чистый способ отделить наши стили от нашего HTML.При этом мы можем сосредоточиться на данных и поведении: 

(function(){
// put all your JavaScript in a closure so you don't pollute the global namespace
  function extract_float_from_price ( price ) {
    return parseFloat( price.replace(/\$/,'') );
  }

  function evaluate_savings ( ) {
    var retail = extract_float_from_price( $('#retailPrice').text() ),
        ours = extract_float_from_price( $('#ourPrice').text() );
    $('#yourSavings').text( parseInt( ( 1 - ( ours / retail ) ) * 100 ) + '%' );
  }

  $( evaluate_savings ); // binds to Dom Ready
})()

http://jsfiddle.net/wd66b/ содержит рабочий пример приведенного выше кода.

1 голос
/ 08 мая 2011

Мне пришлось внести некоторые изменения в ваш исходный код, но попробуйте это (я взял форматирование и знаки $, чтобы математика заработала: 

<table>
<tr><td><font size="2"><strong>Retail Price:</strong></font></td>
<td name="retailPrice" id="retailPrice">97.97</td></tr>

<tr><td><font size="2"><strong>Sale Price:</strong></font></td>
<td><font size="2"><del>$89.97</del></font></td></tr>

<tr><td><font size="3"><strong>Our Price:</strong></font></td>
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">79.97</font></td></tr>
<tr><td><font size="2"><strong>You Save:</strong></font></td>
<td name ="yourSavings" id="yourSavings"></td></tr>
</table>


var rp = $("#retailPrice").text();
var op = $("#ourPrice").text();
var add = parseFloat(rp) - parseFloat(op);    

$("#yourSavings").html(add);
1 голос
/ 08 мая 2011

Похоже, вы пытаетесь написать Excel как HTML и JavaScript, который работает в браузере.

Я думаю, jQuery стоило бы изучить.Это JavaScript-фреймворк для управления DOM Джоном Резигом.Это одна из лучших программ, когда-либо написанных отдельным человеком, и сегодня она используется всеми веб-разработчиками.

...