Блог

Я довольно новичок в 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))
  

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

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 /

Звучит так, как будто вы пытаетесь написать Excel в формате HTML и JavaScript, который запускается в браузере.

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

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

 <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);
  

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

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

 <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 / содержит рабочий пример приведенного выше кода.