0

我想用javacript创建一个库存计算系统，现在我已经创建了它有一些问题是我已经创建了3行1.Purchase，2.Sold，3.Stock。现在我已经设置了当我给出购买价值时和已售出的数量，它将减去并在库存文本框中打印值，然后是下一列库存值也在购买文本框中打印问题是当购买项目变为 nill 时意味着 0 所以我该怎么做才能添加一些数量并重新开始这个流程。编码是。

<html>
<head>
<title>Stock Information</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
    //------------------------------------Date---------------------------------------------
    var today = new Date();                                                               //
    var dd = today.getDate();                                                             //
    var mm = today.getMonth()+1; //January is 0!                                          //
    var yyyy = today.getFullYear();                                                       //
    today = dd+'/'+mm+'/'+yyyy;                                                           //   
    document.write(today);                                                                //
    //-------------------------------------------------------------------------------------
//----------------------------------------------------  
function program(a,b,c,d,e,f)
{
    var total1=a-b;
    document.stock.t3.value=total1;

    var jump1=document.stock.t3.value;
    document.stock.t4.value=jump1;
    var total2= c-d;
    document.stock.t6.value=total2;

    var jump2=document.stock.t6.value;
    document.stock.t7.value=jump2;
    var total3= e-f;
    document.stock.t9.value=total3;
    }
</script>
</head>
<body>
<center>
<h1 class="table">Stock Information</h1>
</center>
<table width="800" align="center" class="table1">
  <tr>
    <th width="260"class="table">Purchase</th>
    <th width="260"class="table">Sold</th>
    <th width="428"class="table">Stock</th>
  </tr>
  <form name="stock">
  <tr align="center">
    <td><input id="t1" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t2" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t3" type="text" style="width:260px;" class="input1" onClick="program(t1.value,t2.value)" readonly/></td>
  </tr>
  <tr align="center">
    <td><input id="t4" type="text" style="width:260px;" class="input1" onClick="program(t1.value,t2.value,t4.value,t5.value)"/></td>
    <td><input id="t5" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t6" type="text" style="width:260px;" class="input1" onClick="program(t1.value,t2.value,t4.value,t5.value)" readonly/></td>
  </tr>
    <tr align="center">
    <td><input id="t7" type="text" style="width:260px;" class="input1" onClick="program(value1.value,value2.value,t4.value,t5.value)"/></td>
    <td><input id="t8" type="text" style="width:260px;" class="input1"/></td>
    <td><input id="t9" type="text" style="width:260px;" class="input1" onClick="program(value1.value,value2.value,t4.value,t5.value,t7.value,t8.value)"readonly/></td>
  </tr>
 </form>
</table>
</body>
</html>
4

1 回答 1

0

我建议您保持 JavaScript 中的逻辑并保持 HTML 干净！:)

而不是onClic你可以使用onChange

<input onChange="program(this)" />

接下来，我们将在 JavaScript 中计算所有内容...

function program(el) {
  var fields = document.stock;

  // Do nothing, if the required fields are empty
  if (fields.t1.value == '' || fields.t2.value == '') return;

  // Calculate result
  fields.t3.value = fields.t1.value - fields.t2.value;

  // Do nothing, if the required fields are empty
  if (fields.t4.value == '' || fields.t5.value == '') return;

  // Calculate result
  fields.t6.value = fields.t4.value - fields.t5.value;

  // Do nothing, if the required fields are empty
  if (fields.t7.value == '' || fields.t8.value == '') return;

  // Calculate result
  fields.t9.value = fields.t7.value - fields.t8.value;
}

我不完全理解它应该如何工作，但我会尝试重复相同的逻辑，你做了什么。

我稍微改变了 HTML 结构：

<form name="stock">
  <table width="800" align="center" class="table1">
    <tr>
      <th width="260"class="table">Purchase</th>
      <th width="260"class="table">Sold</th>
      <th width="428"class="table">Stock</th>
    </tr>

    <tr align="center">
      <td><input id="t1" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t2" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t3" type="text" style="width:260px;" class="input1" readonly /></td>
    </tr>
    <tr align="center">
      <td><input id="t4" type="text" style="width:260px;" class="input1" readonly /></td>
      <td><input id="t5" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t6" type="text" style="width:260px;" class="input1" readonly /></td>
    </tr>
    <tr align="center">
      <td><input id="t7" type="text" style="width:260px;" class="input1" readonly /></td>
      <td><input id="t8" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t9" type="text" style="width:260px;" class="input1" readonly /></td>
    </tr>
  </table>
</form>

请注意，我确实将t4和t7字段设置为readonly.

和 JavaScript：

function program(el) {
  var fields = document.stock;

  // Clear the calculation fields
  fields.t3.value = '';
  fields.t6.value = '';
  fields.t9.value = '';
  fields.t4.value = '';
  fields.t7.value = '';

  // Do nothing, if any of the required fields are empty
  if (fields.t1.value === '' || fields.t2.value === '') return;

  // Calculate result
  fields.t3.value = fields.t1.value - fields.t2.value;

  // Copy the result
  fields.t4.value = fields.t3.value;

  // Do nothing, if the required fields are empty
  if (fields.t5.value === '') return;

  // Calculate result
  fields.t6.value = fields.t4.value - fields.t5.value;

  // Copy the result
  fields.t7.value = fields.t6.value;

  // Do nothing, if the required fields are empty
  if (fields.t8.value === '') return;

  // Calculate result
  fields.t9.value = fields.t7.value - fields.t8.value;
}

您还可以在 JSBin 中查看此演示：http: //jsbin.com/welcome/39835/edit

我希望我做对了。

更新 好的，我做了一些改进。但是0，我没有检查结果是否为 ，而是允许先写。当结果被复制到下一行的第一个字段时，该函数现在只是一个助手，如果字段不为空，则不会覆盖该值。我认为应该是这样。

略微更改的 HTML：

<form name="stock">
  <table width="800" align="center" class="table1">
    <tr>
      <th width="260"class="table">Purchase</th>
      <th width="260"class="table">Sold</th>
      <th width="428"class="table">Stock</th>
    </tr>

    <tr align="center">
      <td><input id="t1" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t2" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t3" type="text" style="width:260px;" class="input1" readonly="readonly" /></td>
    </tr>
    <tr align="center">
      <td><input id="t4" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t5" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t6" type="text" style="width:260px;" class="input1" readonly="readonly" /></td>
    </tr>
    <tr align="center">
      <td><input id="t7" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t8" type="text" style="width:260px;" class="input1" onChange="program(this)" /></td>
      <td><input id="t9" type="text" style="width:260px;" class="input1" readonly="readonly" /></td>
    </tr>
  </table>
</form>

而且，最重要的是，JavaScript！id=""涉及到 DOM 遍历，因此您不再需要依赖 DOM ，您可以在不更改 JavaScript 代码的情况下创建所需的行数。

function program(el) {
  // Get the row (the <tr> element)
  var row = el.parentNode.parentNode;

  // Get all the <input> elements in row
  var inputs = row.getElementsByTagName('input');

  // Return, if required fields are empty
  if (inputs[0].value === '' || inputs[1].value === '') {
    inputs[2].value = '';
    return;
  }

  // Calculate the result
  inputs[2].value = inputs[0].value - inputs[1].value;

  // Find the next row (<tr> element)
  var nextRow = row.nextSibling.nextSibling;
  while (nextRow !== null && nextRow.tagName !== 'TR') {
    nextRow = nextRow.nextSibling;
  }

  // Return, if the next row doesn't exist
  if (nextRow === null || nextRow.tagName !== 'TR') return;

  // Get all <input> fields in row
  var nextRowInputs = nextRow.getElementsByTagName('input');

  if (nextRowInputs[0].value === '') {
    // Copy the previous row result into next rows first input,
    // only if it's not filled already
    nextRowInputs[0].value = inputs[2].value;
  }
}

And this demo can be tested here: http://jsbin.com/welcome/39893/edit

Vote this answer up and give me some points, please! :)

于 2012-10-26T11:03:02.473 回答