Question

好吧，即时通讯使用电子和我建立PC应用程序。应用中的功能使用javascript编写，而窗口外观则使用html编写。该应用程序和其他程序在同一台计算机上运行。

好吧，下一个问题是

Il放宽了应用的外观：https://imgur.com/a/hAaBLxy 我们具有项目女巫的名称和图片不可编辑，向下则类似于买入和卖出价格，最大库存女巫可单击onclick，在此列表上方是保存更新和刷新的按钮

保存需要在此窗口中保存新输入并用新价格替换

更新需要在其他javascript程序数据库中更新此新价格，而这些程序会执行主要操作，因为此应用只是此程序数据库的控制面板

数据库文件为Database.json，如下所示：

{
  "Bread": {
    "sell": {
      "price": 1.2
    },
    "buy": {
      "price": 1.1
    },
    "max_stock": 1
 },

刷新按钮刷新应用程序以显示新输入。（此按钮有效）

我已经进行了研究，并在这里研究了一些问题，但没有人遇到这种情况。

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .button {
      padding: 15px 25px;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .button:hover {background-color: #3e8e41}

    .button:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    </style>
    </head>
    <body>


    <button class="button", onclick="document.getElementById('sound1').play();" >Save</button>
      <audio id="sound1" src="./Music/clickbutton.m4a" preload="auto"></audio>

    </body>
    </html

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .button {
      padding: 15px 25px;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #2E64FE;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .button:hover {background-color: #0101DF}

    .button:active {
      background-color: #2E64FE;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    </style>
    </head>
    <body>


   <button class="button", onclick="document.getElementById('sound1').play();" >Update</button>
      <audio id="sound1" src="./Music/clickbutton.m4a" preload="auto"></audio>
<!DOCTYPE html>
    <html>
        <head>
          <script type="text/javascript">
            function refreshPage(){
              if(confirm("Are you sure, want to refresh?")){
                location.reload();
                  }             
                }
              </script>
                <body style="text-align: center;"></body>
            </head>
            </body>

          </html>
          <meta name="viewport" content="width=device-width, initial-scale=1">
    <head>  
    <style>
    .button {
      padding: 15px 25px;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #2E64FE;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .button:hover {background-color: #0101DF}

    .button:active {
      background-color: #2E64FE;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    </style>
    </head>
    <body> 
    <button class="button" value="Refresh" onclick='refreshPage()' >Refresh</button>

    </body>
    </html>
    </style>
    </head>
    <body>

        <h2 align="left">Database Prices</h2>

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for items.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:20%;">ItemName</th>
    <th style="width:20%;">Picture</th>
    <th style="width:20%;">BuyPrice</th>
    <th style="width:20%;">SellPrice</th>
    <th style="width:20%">Max Stock</th>
  <tr>
      <td>Bread</td>
      <td><img src="./ItemPictures/bread.jpg" alt="HTML5 Icon" style="width:128px;height:128px;"></td>
      <td><p contenteditable="true">1.1</p></td>
      <td><p contenteditable="true">1.2</p></td>
      <td><p contenteditable="true">1</p></td>
  </tr>

</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

</script>

</body>
</html>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

</body>
</html>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Search Box</title>
        <link rel="stylesheet" href="search-box.css">
    </head>
    <body>
        <div class="search-box-wrapper">
        </div>
    </body>
</html>

<html>
    <head>
      <title>Smth</title>

      <style>
      /* csss goes here */

      a{
        text-decoration:none;
        display:inline-block;
        padding: 8px 16px
      }

      a:hover{
        background-color: #ddd;
        color:black;  
      }

      .previous{
      background-color:#f1f1f1;
      color:black;
      }
      .Next{
      background-color:#4caff0;
      color:white;
      border-radius:5px;
      }

    </style>

  </head>

Mu问题是我如何建立这个过程？感谢您的时间。

如何保存textarea输入并将其更新到另一个.js文件数据库中？

0 个答案: