Форум

Vigour9 · #1 (**permalink**) 19.01.2015, 12:32

Ребята, помогите пожалуйста с этим маленьким скриптом. Нужно сделать тоже самое, но только на 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 · #2 (**permalink**) 19.01.2015, 13:16

javascript совместим с jQuery. Этот код будет работать даже если подключить jQuery

Vigour9 · #3 (**permalink**) 19.01.2015, 13:20

Сообщение от danik.js

javascript совместим с jQuery. Этот код будет работать даже если подключить jQuery

Я знаю, но нужно именно чтобы в jquery это было реализовано.

рони · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 19.01.2015, 13:30

Сообщение от рони

this.value||0

alert(+'');

рони · #7 (**permalink**) 19.01.2015, 13:41

danik.js,
непонял

alert(+'s')

Сообщение от danik.js

var valuena = $(this).next('[type="hidden"]').val();

без parentNode это несработает

рони · #8 (**permalink**) 19.01.2015, 13:43

danik.js,
точнее так

alert(+'s'*5||0)

Vigour9 · #9 (**permalink**) 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="-";
}

}

рони · #10 (**permalink**) 19.01.2015, 14:43

Vigour9,
неосилил много букв

Форум

Справочник

Discord чат

Курсы javascript