Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как реализовать это простой javascript на jquery? (https://javascript.ru/forum/jquery/53056-kak-realizovat-ehto-prostojj-javascript-na-jquery.html)

Vigour9 19.01.2015 12:32
Как реализовать это простой javascript на jquery?
 
Ребята, помогите пожалуйста с этим маленьким скриптом. Нужно сделать тоже самое, но только на jquery. Заранее спасибо.
function myCalc(valero){
var inputs = valero.parentNode.parentNode.getElementsByTagName('input');
var i; var length;
var valuena;
var thisval=valero.value;
for (i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].type=='hidden') {
valuena = parseFloat(inputs[i].value);
}
}

valero.parentNode.parentNode.parentNode.cells[2].innerHTML="<span class='tooltips-link red'>"+valuena * thisval+"</span>";
valero.parentNode.parentNode.parentNode.cells[3].innerHTML="<span class='tooltips-link red'>"+valuena * thisval*2+"</span>";;
valero.parentNode.parentNode.parentNode.cells[4].innerHTML="<span class='tooltips-link red'>"+valuena * thisval*3+"</span>";;

}



<table id="demonstration" border="1">
  <tbody>
    <tr>
      <td colspan="5"><b>InnerHtml рядом стоящих ячеек <font color="red">текущего ряда</font> меняются когда я вписываю цифры в текстбокс. Как реализовать это на jQuery?</b></td>
    </tr>
    <tr>
      <td  style="width:100px">Put number</td>
      <td style="width:100px">
        <span class=" spinBox" id="demonstration1">
        <input value="1" type='text' size="5" onchange='myCalc(this);' onkeyup='myCalc(this);'>
        </span>
        <input type='hidden' value='5' />
      </td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
      <td  style="width:100px">Put 2nd number</td>
      <td style="width:100px">
        <span class=" spinBox" id="demonstration1">
        <input value="1" type='text' size="5" onchange='myCalc(this);' onkeyup='myCalc(this);'>
        </span>
        <input type='hidden' value='5' />
      </td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
  </tbody>
</table>

danik.js 19.01.2015 13:16
javascript совместим с jQuery. Этот код будет работать даже если подключить jQuery :D

Vigour9 19.01.2015 13:20
Цитата:
Сообщение от danik.js (Сообщение 352166)
javascript совместим с jQuery. Этот код будет работать даже если подключить jQuery :D
Я знаю, но нужно именно чтобы в jquery это было реализовано.

рони 19.01.2015 13:23
Vigour9,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .red {
    color: #FF0000;
  }

  .tooltips-link{
       font-weight: bold;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var td = $("td");
    td.on("input", "input:first", function(event) {
        var val = +$(event.delegateTarget).find(":hidden").val() * this.value||0;
        $(event.delegateTarget).nextUntil().each(function(indx, element) {
            $(this).html($("<span/>", {
                "class": "tooltips-link red",
                "text": val * (indx + 1)
            }))
        })
    })
});
  </script>
</head>

<body>  <table id="demonstration" border="1">
  <tbody>
    <tr>
      <td colspan="5"><b>InnerHtml рядом стоящих ячеек <font color="red">текущего ряда</font> меняются когда я вписываю цифры в текстбокс. Как реализовать это на jQuery?</b></td>
    </tr>
    <tr>
      <td  style="width:100px">Put number</td>
      <td style="width:100px">
        <span class=" spinBox" id="demonstration1">
        <input value="1" type='text' size="5" >
        </span>
        <input type='hidden' value='5' />
      </td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
      <td  style="width:100px">Put 2nd number</td>
      <td style="width:100px">
        <span class=" spinBox" id="demonstration1">
        <input value="1" type='text' size="5" >
        </span>
        <input type='hidden' value='3' />
      </td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
  </tbody>
</table>

</body>

</html>

danik.js 19.01.2015 13:28 
var valuena = $(this).next('[type="hidden"]').val();
var cells = $(this).closest('tr').get(0).cells;


Далее вместо паравозов из parentNode юзай просто cells, без правок.
Еще неплохо бы обработчики навешивать тоже через jQuery.

danik.js 19.01.2015 13:30
Цитата:
Сообщение от рони
this.value||0
 
alert(+'');

рони 19.01.2015 13:41
danik.js,
непонял 
alert(+'s')

Цитата:
Сообщение от danik.js
var valuena = $(this).next('[type="hidden"]').val();
без parentNode это несработает

рони 19.01.2015 13:43
danik.js,
точнее так 
alert(+'s'*5||0)

Vigour9 19.01.2015 14:00
рони,
Спасибо тебе большое. Только вот, это был упрощенный код чего-то немного более сложного. Я надеялся на его основе самостоятельно доработать его, но не получается. Я немного разбираюсь в javascript, но с jquery полная тьма. Если ты не возражаешь, привожу более сложный код. Если поможешь и с ним разобраться, буду очень признателен.
function myCalc(valero){
var valCurs=0.7844;
var valCursRub=0.0120;
var inputs = valero.parentNode.parentNode.getElementsByTagName('input');
var i; var length;
var valuena;
var thisval=valero.value;
for (i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].type=='hidden') {
valuena = parseFloat(inputs[i].value);
}
}
if(thisval>=300){
var totale=valuena * thisval;
var discount=totale*0.2;
var pureprice=totale-discount;
var CurRate=(pureprice/valCurs).toFixed(2);
var CurRate2=(pureprice/valCursRub).toFixed(2);
valero.parentNode.parentNode.parentNode.cells[2].innerHTML="<span class='tooltips-link red' title='"+CurRate+"$, "+CurRate2+" руб.'>"+pureprice+" ман.</span>";
valero.parentNode.parentNode.parentNode.cells[3].innerHTML="<span style='color:red; font-weight:bold'>-20%</span>";
var saldo=totale-pureprice;
var CurRate3=(saldo/valCurs).toFixed(2);
var CurRate4=(saldo/valCursRub).toFixed(2);
valero.parentNode.parentNode.parentNode.cells[4].innerHTML="<span class='tooltips-link red' title='"+CurRate3+"$, "+CurRate4+" руб.'>"+saldo.toFixed(2)+" ман.</span>";
}else if(thisval>=200){
var totale=valuena * thisval;
var discount=totale*0.15;
var pureprice=totale-discount;
var CurRate=(pureprice/valCurs).toFixed(2);
var CurRate2=(pureprice/valCursRub).toFixed(2);
valero.parentNode.parentNode.parentNode.cells[2].innerHTML="<span class='tooltips-link red' title='"+CurRate+"$, "+CurRate2+" руб.'>"+pureprice+" ман.</span>";
valero.parentNode.parentNode.parentNode.cells[3].innerHTML="<span style='color:red; font-weight:bold'>-15%</span>";
var saldo=totale-pureprice;
var CurRate3=(saldo/valCurs).toFixed(2);
var CurRate4=(saldo/valCursRub).toFixed(2);
valero.parentNode.parentNode.parentNode.cells[4].innerHTML="<span class='tooltips-link red' title='"+CurRate3+"$, "+CurRate4+" руб.'>"+saldo.toFixed(2)+" ман.</span>";
}else if(thisval>=100){
var totale=valuena * thisval;
var discount=totale*0.10;
var pureprice=totale-discount;
var CurRate=(pureprice/valCurs).toFixed(2);
var CurRate2=(pureprice/valCursRub).toFixed(2);
valero.parentNode.parentNode.parentNode.cells[2].innerHTML="<span class='tooltips-link red' title='"+CurRate+"$, "+CurRate2+" руб.'>"+pureprice+" ман.</span>";
valero.parentNode.parentNode.parentNode.cells[3].innerHTML="<span style='color:red; font-weight:bold'>-10%</span>";
var saldo=totale-pureprice;
var CurRate3=(saldo/valCurs).toFixed(2);
var CurRate4=(saldo/valCursRub).toFixed(2);
valero.parentNode.parentNode.parentNode.cells[4].innerHTML="<span class='tooltips-link red' title='"+CurRate3+"$, "+CurRate4+" руб.'>"+saldo.toFixed(2)+" ман.</span>";
}else{
var CurRate=((valuena * thisval)/valCurs).toFixed(2);
var CurRate2=((valuena * thisval)/valCursRub).toFixed(2);
valero.parentNode.parentNode.parentNode.cells[2].innerHTML="<span class='tooltips-link red' title='"+CurRate+"$, "+CurRate2+" руб.'>"+valuena * thisval+" ман.</span>";
valero.parentNode.parentNode.parentNode.cells[3].innerHTML="-";
valero.parentNode.parentNode.parentNode.cells[4].innerHTML="-";
}

}

рони 19.01.2015 14:43
Vigour9,
неосилил много букв :cray:

Vigour9 19.01.2015 15:28
Цитата:
Сообщение от рони (Сообщение 352189)
Vigour9,
неосилил много букв :cray:
В принципе, почти ничего нового тут нет. Просто нужно задать условия, что
если значение текстбокса
больше равно 300 - сделать одно,
если больше равно 200 - сделать другое,
если больше равно 100 - сделать третье.
Можешь хотя бы это подсказать как сделать, на предыдущем упрощенном варианте, а в остальном постараюсь сам как-нибудь разобраться.
В любом случае, спасибо.

рони 19.01.2015 16:14
Vigour9, строку 41 сами
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .red {
    color: #FF0000;
  }

  .tooltips-link{
       font-weight: bold;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <style type="text/css">
 .myclass {
   background: #FFFF00;
 }

  </style>
  <script>
$(function() {
    var td = $("td");
    var valCurs=0.7844;
    var valCursRub=0.0120;
    td.on("input", "input:first", function(event) {
        var totale = +$(event.delegateTarget).find(":hidden").val() * this.value||0;
        var discount=0, sale = 0;
 if(this.value >= 300){
sale = 0.2}
else if(this.value >= 200){
sale = 0.15}
else if(this.value >= 100){
sale  = 0.1};
var discount=totale*sale;
var pureprice=totale-discount;
var CurRate=(pureprice/valCurs).toFixed(2);
var CurRate2=(pureprice/valCursRub).toFixed(2);
var saldo=totale-pureprice;
var CurRate3=(saldo/valCurs).toFixed(2);
var CurRate4=(saldo/valCursRub).toFixed(2);
var Sum = [pureprice+" ман.", sale ? -sale*100 + "%" : "-", saldo ? saldo.toFixed(2)+" ман." : "-"];
var Title = [CurRate,"",""];
        $(event.delegateTarget).nextUntil().each(function(indx, element) {
            $(this).html($("<span/>", {
                "class": "tooltips-link red",
                "text": Sum[indx],
                "title": Title[indx]
            }).tooltip({tooltipClass:"myclass" }))
        })
    })




});
  </script>


</head>

<body>  <table id="demonstration" border="1">
  <tbody>
    <tr>
      <td colspan="5"><b>InnerHtml рядом стоящих ячеек <font color="red">текущего ряда</font> меняются когда я вписываю цифры в текстбокс. Как реализовать это на jQuery?</b></td>
    </tr>
    <tr>
      <td  style="width:100px">Put number</td>
      <td style="width:100px">
        <span class=" spinBox" id="demonstration1">
        <input value="1" type='text' size="5" >
        </span>
        <input type='hidden' value='5' />
      </td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
      <td  style="width:100px">Put 2nd number</td>
      <td style="width:100px">
        <span class=" spinBox" id="demonstration1">
        <input value="1" type='text' size="5"  >
        </span>
        <input type='hidden' value='5' />
      </td>
       <td></td>
       <td></td>
       <td></td>
   </tr>
  </tbody>
</table>

</body>

</html>

danik.js 19.01.2015 16:50
Цитата:
Сообщение от Vigour9
привожу более сложный код
Он не сложный, он раздутый. Из-за нарушения правила "не повторяйся". Код не должен повторяться - это тебе не стихотворение.

Vigour9 19.01.2015 17:02
рони,
Большущий Респект вам Добрый Человек!)

Vigour9 19.01.2015 18:30
рони,
еще пара маленьких вопросиков.
1.Как сделать, чтобы всё это работало только для <td> конкретной таблицы, по классу или ид.
2.Я добавил спинбокс (+-) к текстбоксу, вот проблемка, когда я ввожу цифру в текстбокс все нормально работает, а когда увеличиваю или уменьшаю число с помощью кнопок спинбокса, ничего не работает. Что тут можно сделать? Как тут реализовать аналог события onchange() в javascript. На javascripte спинбокс работает.
Спасибо за ваше внимание и терпение :)

danik.js 19.01.2015 18:37
Так не пойдет?
<input type="number" />

Ниче реализовывать не надо - все нативно работает.

Vigour9 19.01.2015 18:44
danik.js,
Насколько я знаю, эта штука не на всех браузерах работает и к тому же не очень красиво выглядит.

рони 19.01.2015 18:53
Цитата:
Сообщение от Vigour9
только для <td> конкретной таблицы, по классу или ид.
var td = $("#demonstration td");
или var td = $("td.Класс");

рони 19.01.2015 19:06
Цитата:
Сообщение от Vigour9
когда я ввожу цифру в текстбокс все нормально работает, а когда увеличиваю или уменьшаю число с помощью кнопок спинбокса, ничего не работает. Что тут можно сделать?
 
<span onclick="$(this).next()[0].value--;$(this).next().trigger('input') ">-</span><input value="1" type='text' size="5" ><span onclick="$(this).prev()[0].value++;$(this).prev().trigger('input') ">+</span>

более интересные реализации type="number" с css и ограничением ищите по форуму их много

Vigour9 19.01.2015 20:06
рони,
еще раз благодарю за быструю и своевременную помощь.

Vigour9 20.01.2015 14:41
рони,
Вот еще одна проблемка. Я хочу использовать сторонний jquery Тултип(всплывающую подсказку), чтобы когда я наводил мышку над ценой(в ячейке) появлялись её рубл. и долларовые эквиваленты. Только вот, вместо модного тултипа появляется стандартная виндоуская, с хтмл. Насколько я понял, т.к. цена подсчитывается скриптом налету, тултип не срабатывает. Я перерыл кучу форумов, но ответа на этот вопрос не нашел. Может вы что-нибудь подскажете? Возможно ли это сделать?

рони 20.01.2015 15:40
Цитата:
Сообщение от Vigour9
Возможно ли это сделать?
да -- искать надо по форуму

рони 20.01.2015 15:44
Vigour9,
или попробуйте помедитировать тут http://jqueryui.com/tooltip/#custom-content

рони 20.01.2015 16:01
Vigour9,
впрочем и так работает смотрите снова 12 пост

Vigour9 20.01.2015 20:27
Цитата:
Сообщение от рони (Сообщение 352387)
Vigour9,
впрочем и так работает смотрите снова 12 пост
Спасибо! Пытаюсь поставить вам еще +, говорит нельзя.


Часовой пояс GMT +3, время: 18:42.