html 设计一个网页包含一个2*2的表格均可输入数字还包含一个方框里面展示第一个表格内所有数字相加的结果-摩杜云开发者社区

Loading [MathJax]/jax/output/CommonHTML/fonts/TeX/fontdata.js

In [1]:

addr_1 = r"d:\data\test.html"

In [9]:

# 创建一个HTML5文档
text = """
<!DOCTYPE html>
<html>
<head>
    <title>数字相加</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>输入数字:</h2>

<table id="myTable">
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
</table>

<h2>总和:</h2>
<p id="sum">0</p>

<script>
$(document).ready(function(){
  $(".numInput").on("input", function(){
    var sum = 0;
    $(".numInput").each(function(){
      sum += Number($(this).val());
    });
    $("#sum").text(sum);
  });
});
</script>

</body>
</html>

"""

In [10]:

# 将HTML代码保存到文件
with open(addr_1, "w") as f:
    f.write(text)

print("HTML文件已创建")

HTML文件已创建

In [11]:

import webbrowser

# 使用 webbrowser 打开 HTML 文件
webbrowser.open(addr_1)

Out[11]:

True

In [ ]:

这是一个简单的HTML页面，包含一个2*2的表格，每个单元格都可以输入数字。还有一个显示框，用于显示表格中所有数字的总和。

```html
<!DOCTYPE html>
<html>
<head>
    <title>数字相加</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>输入数字:</h2>

<table id="myTable">
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
</table>

<h2>总和:</h2>
<p id="sum">0</p>

<script>
$(document).ready(function(){
  $(".numInput").on("input", function(){
    var sum = 0;
    $(".numInput").each(function(){
      sum += Number($(this).val());
    });
    $("#sum").text(sum);
  });
});
</script>

</body>
</html>
```

这个页面使用了jQuery库来处理输入事件和计算总和。当你在任何一个输入框中输入数字时，它会自动计算所有输入框中的数字总和，并在页面下方的显示框中显示出来。请注意，你需要在支持JavaScript的浏览器中打开此页面才能看到效果。如果你想在本地使用这个页面，你需要确保你的浏览器允许运行JavaScript代码。如果你在使用过程中遇到任何问题，欢迎随时向我提问。祝你使用愉快！