JavaScript动态添加表格数据行(ASP后台数据库保存例子)

概述

JavaScript是现代Web开发中最流行的脚本语言之一，它可以很好地处理DOM和前端交互。本文将介绍如何使用Javascript在表格中动态添加数据行，并且通过ASP后台保存到数据库中，从而实现数据的添加和保存。

准备工作

在开始之前，务必确保以下几点：

你已经掌握了HTML、JavaScript和ASP的基本知识，了解如何创建表格、处理DOM和向服务器发送请求等基本操作。
你已经有一个数据库，并且知道如何连接它，以及如何在ASP中进行数据库操作。

实现步骤

步骤一：创建HTML表格和表单

首先，我们需要在HTML页面中创建一个表格和一个表单。用于表格数据的呈现和用户输入。你可以根据需求设计合适的表格结构和表单元素，这里简单示范一下。

<table id="my-table">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里是数据行，如果有需要，初始值可以在ASP后台获取到并渲染 -->
  </tbody>
</table>

<form id="my-form" method="post">
  <label for="name">名称：</label>
  <input type="text" id="name" name="name">

  <label for="price">价格：</label>
  <input type="number" id="price" name="price">

  <label for="qty">数量：</label>
  <input type="number" id="qty" name="qty">

  <input type="submit" value="添加">
</form>

步骤二：JavaScript添加数据行

接下来，我们使用JavaScript来动态添加表格数据行。这里我们将添加事件监听器到表单中的提交按钮，当表单提交时，我们将阻止默认行为并使用 AJAX 请求将表单数据提交到服务器，添加到数据库中并返回一个新的数据行，然后使用 DOM 操作插入它。

// 获取表格和表单相关的DOM元素
var table = document.getElementById('my-table');
var form = document.getElementById('my-form');
var tbody = table.getElementsByTagName('tbody')[0];

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 发送AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/add-data-to-db.asp');
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  // 组装表单数据
  var formData = new FormData(form);

  // 发送表单数据
  xhr.send(formData);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 解析新行数据，插入表格
      var newRowData = JSON.parse(xhr.responseText);
      var newRow = tbody.insertRow();
      newRow.insertCell().innerHTML = newRowData.name;
      newRow.insertCell().innerHTML = newRowData.price;
      newRow.insertCell().innerHTML = newRowData.qty;
      newRow.insertCell().innerHTML = '<a href="#" class="delete">删除</a>';

      // 给新行的删除链接添加“删除”事件监听器
      var deleteLink = newRow.querySelector('.delete');
      deleteLink.addEventListener('click', function(event) {
        event.preventDefault();
        tbody.removeChild(newRow);
      });
    }
  };
});

步骤三：ASP接收请求并将数据保存到数据库

最后一步是处理服务器端的ASP代码，将收到的表单数据存储到数据库中，这部分的代码和具体的服务器端环境以及数据库连接方式等有关，这里简单示范一个ASP的例子：

<!-- add-data-to-db.asp -->

<%
Dim name, price, qty
name = Request.Form("name")
price = Request.Form("price")
qty = Request.Form("qty")

' ...使用ASP数据库操作将表单数据存储到数据库中

' 返回一个新的数据行
Dim newRow
Set newRow = Server.CreateObject("Scripting.Dictionary")
newRow.Add "name", name
newRow.Add "price", price
newRow.Add "qty", qty
Response.Write(Json.Serialize(newRow))
%>

示例说明

示例一：给表格绑定Class

在上面的代码中，我们通过getElementById来获取表格和表单，这要求我们在HTML中将它们的ID设为相应的值。但是有时候我们会有多个表格或多个表单，这时候我们就可以将它们绑定到相同的CSS Class上，并且使用getElementsByClassName来获取它们，如下所示：

<table class="my-table">
  <!-- ... -->
</table>

<form class="my-form">
  <!-- ... -->
</form>

// 获取表格和表单相关的DOM元素
var table = document.getElementsByClassName('my-table')[0];
var form = document.getElementsByClassName('my-form')[0];
var tbody = table.getElementsByTagName('tbody')[0];

示例二：使用jQuery简化DOM操作

上面的代码中使用了大量的DOM操作来插入新数据行和为删除链接添加事件监听器等。如果我们使用jQuery，那么大大简化这些操作，如下所示：

$(function() {
  // 监听表单提交事件
  $('#my-form').on('submit', function(event) {
    event.preventDefault();

    $.ajax({
      url: '/add-data-to-db.asp',
      type: 'POST',
      data: $(this).serialize(),
      success: function(newRowData) {
        // 插入新数据行
        $('<tr>')
          .append($('<td>').text(newRowData.name))
          .append($('<td>').text(newRowData.price))
          .append($('<td>').text(newRowData.qty))
          .append($('<td>').append(
            $('<a>').text('删除').addClass('delete').on('click', function(event) {
              event.preventDefault();
              $(this).closest('tr').remove();
            })
          ))
          .appendTo($('#my-table tbody'));
      }
    });
  });
});