21xrx.com
2025-07-04 20:55:50 Friday
文章检索 我的文章 写文章
JavaScript和HTML的实际应用
2023-06-10 08:42:04 深夜i     14     0
动态生成页面元素 表单验证 数据格式化

我是一名前端工程师,经常会接到JavaScript和HTML相关的项目。JavaScript是一种高级编程语言,它可以在HTML页面中为用户提供动态效果和交互功能。而HTML则是一种用于创建网页的标记语言,常用于文档的格式化和定义网页的结构。

在我的工作中,有很多实际应用需要用到JavaScript和HTML,比如,动态生成页面元素、表单验证、数据格式化等等。下面,我将分享一个实际应用的例子。

实现一个表格动态生成的功能,首先我们需要定义表格结构和样式,然后使用JavaScript动态生成表格元素,同时也需要根据实际数据对表格进行格式化,还要对用户输入的表单数据进行验证。

首先,我们先定义一个表格结构:

HTML
 
  
   
   
   
   
  
 
 
 

 
  
   序号
   姓名
   年龄
   性别

接下来,我们使用JavaScript动态生成表格元素:

JavaScript
var tableData = [
  age: 20,
  age: 23,
 id: 3
];
var tableBody = document.querySelector('#myTable tbody');
tableData.forEach(function(data) {
 var row = document.createElement('tr');
 row.innerHTML = '' + data.id + '' +
         '' + data.name + '' +
         '' + data.age + '' +
         '' + data.gender + '';
 tableBody.appendChild(row);
});

以上代码使用了tableData数组中的数据,通过forEach方法遍历每个数据元素,动态创建表格行和单元格,并将其添加到表格中。

下一步,我们需要对表格中的数据进行格式化:

JavaScript
var tableData = [
  age: 20,
  name: '李四',
  name: '王五'
];
var tableBody = document.querySelector('#myTable tbody');
tableData.forEach(function(data) {
 var row = document.createElement('tr');
 row.innerHTML = '' + data.id + '' +
         '' + data.name + '' +
         '' + data.age + '' +
         '' + (data.gender === '男' ? '男性' : '女性') + '';
 tableBody.appendChild(row);
});

在以上代码中,我们对表格中的性别数据进行了格式化,即将男和女转换为男性和女性,以便更好的展示和理解数据。

最后,我们需要对表单数据进行验证:

JavaScript
var form = document.querySelector('#myForm');
form.addEventListener('submit', function(e) {
 e.preventDefault(); // 阻止表单提交
 var name = form.querySelector('[name="name"]').value;
 var age = form.querySelector('[name="age"]').value;
 var gender = form.querySelector('[name="gender"]').value;
 if (!name || !age || !gender) {
  alert('请完整填写表单');
 } else
  // 提交表单到服务器
 
});

以上代码中,我们使用addEventListener方法为表单绑定提交事件,阻止表单提交后获取表单中的姓名、年龄和性别数据,进行非空验证,如果数据不完整则弹出提示窗口,否则将数据提交到服务器。

通过以上的实际应用例子,我们可以了解到JavaScript和HTML的常见应用,即动态生成页面元素、表单验证和数据格式化,这些应用都为前端开发提供了更好的用户体验和数据展示效果。

  
  

评论区

    相似文章