动态表格操作：JS实现加减行与实时求和

195 浏览量更新于2024-09-02 收藏 64KB PDF 举报

本篇文章主要介绍了如何使用JavaScript实现动态添加、删除行以及表格中的实时求和功能。作者通过在HTML页面中结合JavaServer Pages (JSP) 和 JavaScript，展示了如何在一个发货申请表格中进行交互式计算。以下是关键知识点的详细解释： 1. **JSP基础设置**：开头部分定义了JSP页面的语言（Java），内容类型和字符编码，以及引入了JSTL核心标签库，用于简化动态页面中的条件语句和迭代操作。 2. **HTML结构**：使用了`<html>`标签创建HTML文档结构，并设置了页面的标题为"发货申请"。同时，头部区域包含了`<meta>`标签，设置了页面的字符集为UTF-8，确保了跨浏览器的兼容性。 3. **JavaScript函数**： - `countTotalRealPrice()`：此函数用于计算实际价格（realPrice）与产品需求数量（productNeedNum）的乘积，然后将结果存储在id为"totalRealPrice"的元素中。当用户在产品需求数量输入框(`#productNeedNum`)中改变值并触发`onkeyup`事件时，这个函数会被调用。 - `countTotalTicketPrice()`：类似地，用于计算票价（ticketPrice）与产品需求数量的乘积，并更新到id为"totalTicketPrice"的元素中。 4. **初始化隐藏元素**：通过JavaScript的`$(function(){...})`来执行一段代码，它确保在DOM加载完成后执行。这里设置了多个表格行（`#t1`至`#t5`）的初始状态为隐藏，可能表示这些是动态添加的行。 5. **动态添加和删除行**：文章未提供具体的动态添加和删除行的代码，但根据上下文可以推测，文章可能包含JavaScript代码来允许用户在表格中添加新行或删除现有行。这通常涉及到创建HTML行元素，插入到表格中，并可能通过数据绑定与表单元素关联，以便在添加或删除时更新对应的计算。 6. **实时求和**：通过`onkeyup`事件，用户输入变化时，函数会实时计算总价格。这对于维护表格的实时有效性非常有用，避免用户手动刷新页面才能看到最新的计算结果。本文主要讲解了如何利用JavaScript的DOM操作和事件处理，结合JSP页面模板，实现了一个动态且交互式的表格，用户可以在其中添加、删除行，并能即时看到基于输入值的总价格求和。这对于前端开发中表格管理的需求，尤其是处理大量数据或需要频繁计算的应用场景非常实用。

js实现动态添加、删除行、实现动态添加、删除行、onkeyup表格求和示例表格求和示例

代码如下:

<%@ page language=”java” contentType=”text/html; charset=UTF-8″

pageEncoding=”UTF-8″%>

<%@ taglib uri=”http://java.sun.com/jsp/jstl/core” prefix=”c” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

function countTotalRealPrice(){

var productNeedNum = $(“#productNeedNum”).val();

var realPrice= $(“#realPrice”).val();

var totalRealPrice=productNeedNum*realPrice;

$(“#totalRealPrice”).val(totalRealPrice);

}

function countTotalTicketPrice(){

var productNeedNum = $(“#productNeedNum”).val();

var ticketPrice = $(“#ticketPrice”).val()

var totalTicketPrice= productNeedNum*ticketPrice;

$(“#totalTicketPrice”).val(totalTicketPrice);

}

$(function(){

$(“#t1”).css(“display”, “none”);

$(“#t2”).css(“display”, “none”);

$(“#t3”).css(“display”, “none”);

$(“#t4”).css(“display”, “none”);

$(“#t5”).css(“display”, “none”);

});

/* function sumNum(){

$(“input[name=productNeedNum]”).each(function(){

//alert($(this).attr(“id”));//每一个的id

var productNeedNum=$(“#productNeedNum”).attr(“value”)

alert(productNeedNum);

// var sum += productNeedNum;

//alert(“sum:”+sum);

// $(“#sum”).val(sum);

});

} */

function addRow(){

var x=document.getElementById(‘tb1’).insertRow(3);

var a=x.insertCell(0)

var b=x.insertCell(1)

var c=x.insertCell(2)

var d=x.insertCell(3)

var e=x.insertCell(4)

var f=x.insertCell(5)

var g=x.insertCell(6)

var h=x.insertCell(7)

var a1 = “<select id=’productId’ name=’productId’ style=’width: 140px;height: 22px; text-align: center;’><c:forEach

items=’${productIdNames}’ var=’p’><option value=’${p.productId }’>${p.commName }</option></c:forEach></select>”;

var b1=”<select id=’typeName’ name=’typeName’ style=’width: 140px;height: 22px; text-align: center;’><c:forEach

items=’${typeInfos }’ var=’ti’><option value=’${ti.typeId }’> ${ti.typeName }</option></c:forEach> </select>”;

var c1 = “<select id=” name=” style=’width: 70px;height: 22px; text-align: center;’><option value=’0′> 盒</option><option

value=’1′> 瓶</option></select>”;

var d1=”<input onkeyup=’sum(this.id)’ name=’productNeedNum’ id=’productNeedNum’ type=’text’ style=’width:89%;height:

18px’ value=’0′ />”;

var e1='<input onkeyup=”sum(this.id)” name=”realPrice” id=”realPrice” type=”text” style=” width:89%;height: 18px;”

value=”0″/>’;

var f1='<input onkeyup=”sum(this.id)” name=”ticketPrice” id=”ticketPrice” type=”text” style=” width:91%;height: 18px;”

value=”0″/>’;

var g1='<input name=”totalRealPrice” id=”totalRealPrice” type=”text” style=” width:92%;height: 18px;” value=”0″ />’;

var h1=”<input name=’totalTicketPrice’ id=’totalTicketPrice’ type=’text’ style=’ width:92.5%;height: 18px;’ value=’0′ />”;

a.innerHTML=a1

b.innerHTML=b1

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38686924

粉丝: 14
资源: 956

动态表格操作：JS实现加减行与实时求和

分享JS数组求和与求最大值的方法

Js结合使用图层表格文本框实现简单编辑

JS动态表格操作：添加、删除行及实时求和示例

原生JS 实现的input输入时表格过滤操作示例

jquery validate 实现动态增加/删除验证规则操作示例

jQuery 实时保存页面动态添加的数据的示例

js实现密码强度检测【附示例】

js实现表格数据搜索

JS实现动态输入匹配功能的示例与数据库应用

Axure OnKeyUp实现实时表格验证：案例与逻辑条件应用

最新资源