【JS】如何获取<tbody>中某一行元素的value?

本文介绍了在JavaScript中如何获取HTML表格 tbody 中某一行(tr)的特定单元格(td)的值。通过使用jQuery的closest()和find()方法,结合eq(0)选择器,可以获取到指定列的文本内容。

点击修改,在修改界面的文本框中,出现的就是这行记录的值。

初始界面:
在这里插入图片描述

修改界面:
在这里插入图片描述

JS代码:

/*获取表格中某行的学生信息*/
    $("#body").on('click','.update',function () {

       // const no=$(this).closest("tr").find("td").eq(0).text();
        $("#alterSno").val($(this).closest("tr").find("td").eq(0).text());
        $("#alterSname").val($(this).closest("tr").find("td").eq(1).text());
        $("#alterSsex").val($(this).closest("tr").find("td").eq(2).text());
       // delete_Stu(no);
    })

通过$(this).closest(“tr”).find(“td”).eq(0).text()可以获取所要修改的记录的各列的值,this是指修改的那行记录。
$(this).closest(“tr”):定位距离这行记录最近的“tr”标签(即这行记录在哪个tr标签内)
$(this).closest(“tr”).find(“td”).eq(0).text():获取
标签内的第一个标签内的值

<div class="table-container"> <table> <thead> <tr> <th>序号</th> <th>业务名称</th> <th>受理主体编号</th> <th>受理主体名称</th> <th>受理时间</th> <th>是否符合规定</th> <th>具体记录情况</th> </tr> </thead> <tbody id="checkRecordBody"> <tr> <td>1</td> <td><input type="text" placeholder="请输入业务名称"></td> <td><input type="text" placeholder="请输入受理主体编号"></td> <td><input type="text" placeholder="请输入受理主体名称"></td> <td><input type="date"></td> <td> <select> <option value="" disabled selected>请选择</option> <option>是</option> <option>否</option> </select> </td> <td><input type="text" placeholder="请输入具体记录情况"></td> </tr> <tr> <td>2</td> <td><input type="text" placeholder="请输入业务名称"></td> <td><input type="text" placeholder="请输入受理主体编号"></td> <td><input type="text" placeholder="请输入受理主体名称"></td> <td><input type="date"></td> <td> <select> <option value="" disabled selected>请选择</option> <option>是</option> <option>否</option> </select> </td> <td><input type="text" placeholder="请输入具体记录情况"></td> </tr> <tr> <td>3</td> <td><input type="text" placeholder="请输入业务名称"></td> <td><input type="text" placeholder="请输入受理主体编号"></td> <td><input type="text" placeholder="请输入受理主体名称"></td> <td><input type="date"></td> <td> <select> <option value="" disabled selected>请选择</option> <option>是</option> <option>否</option> </select> </td> <td><input type="text" placeholder="请输入具体记录情况"></td> </tr> <tr> <td>4</td> <td><input type="text" placeholder="请输入业务名称"></td> <td><input type="text" placeholder="请输入受理主体编号"></td> <td><input type="text" placeholder="请输入受理主体名称"></td> <td><input type="date"></td> <td> <select> <option value="" disabled selected>请选择</option> <option>是</option> <option>否</option> </select> </td> <td><input type="text" placeholder="请输入具体记录情况"></td> </tr> <tr> <td>5</td> <td><input type="text" placeholder="请输入业务名称"></td> <td><input type="text" placeholder="请输入受理主体编号"></td> <td><input type="text" placeholder="请输入受理主体名称"></td> <td><input type="date"></td> <td> <select> <option value="" disabled selected>请选择</option> <option>是</option> <option>否</option> </select> </td> <td><input type="text" placeholder="请输入具体记录情况"></td> </tr> </tbody> </table>在每一行添加复选框用于选中
07-22
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>会计信息管理系统</title> <style> body { font-family: "Microsoft YaHei", sans-serif; background-color: #f4f6f9; margin: 0; padding: 0; color: #333; } header { background-color: #2c3e50; color: white; padding: 20px; text-align: center; } nav { background-color: #34495e; overflow: hidden; } nav a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } nav a:hover { background-color: #ddd; color: black; } .container { max-width: 1200px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } /* 卡片样式 */ .card-container { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .card { flex: 1; min-width: 250px; border: 1px solid #ddd; border-radius: 8px; padding: 20px; background-color: #f8f9fa; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .card h3 { color: #2c3e50; margin-top: 0; } .card p { color: #666; line-height: 1.6; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } table, th, td { border: 1px solid #ccc; } th, td { padding: 12px; text-align: center; } th { background-color: #ecf0f1; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #27ae60; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #219a52; } .btn-group { margin: 20px 0; } .btn { display: inline-block; padding: 10px 18px; background-color: #3498db; color: white; text-decoration: none; border-radius: 4px; margin-right: 10px; font-size: 14px; } .btn:hover { background-color: #2980b9; } .chart-container { margin-top: 30px; text-align: center; } footer { text-align: center; padding: 20px; background-color: #2c3e50; color: white; margin-top: 40px; } /* 隐藏非当前页面 */ .container > section { display: none; } </style> </head> <body> <header> <h1>会计信息网络化管理系统</h1> <p>实时财务数据 · 安全高效 · 多端同步</p> </header> <nav> <a href="#home">首页</a> <a href="#balance-sheet">资产负债表</a> <a href="#income-statement">利润表</a> <a href="#entry">凭证录入</a> <a href="#charts">数据可视化</a> </nav> <div class="container"> <!-- ============ 首页内容 ============ --> <section id="home"> <h2>欢迎使用会计信息管理系统</h2> <p>本系统提供企业财务数据的在线录入、查询、分析与可视化功能,支持多用户权限管理和数据加密传输。</p> <!-- 功能卡片 --> <div class="card-container"> <div class="card"> <h3>📊 财务报表</h3> <p>一键生成资产负债表、利润表、现金流量表,支持导出为 Excel 或 PDF 格式。</p> </div> <div class="card"> <h3>📝 凭证管理</h3> <p>支持会计凭证的增删改查,自动校验借贷平衡,确保账务准确无误。</p> </div> <div class="card"> <h3>📈 数据可视化</h3> <p>通过图表直观展示收入、支出、利润趋势,辅助管理层决策。</p> </div> <div class="card"> <h3>🔐 权限控制</h3> <p>支持多角色登录(管理员、会计、出纳),不同角色拥有不同操作权限。</p> </div> </div> <!-- 快捷操作 --> <div class="btn-group"> <a href="#entry" class="btn">➕ 录入新凭证</a> <a href="#balance-sheet" class="btn">📄 查看资产负债表</a> <a href="#income-statement" class="btn">📉 查看利润表</a> <a href="#charts" class="btn">📊 查看图表分析</a> </div> <!-- 最近凭证记录 --> <h3>近期凭证记录(模拟)</h3> <table> <thead> <tr> <th>编号</th> <th>日期</th> <th>摘要</th> <th>科目</th> <th>借方金额</th> <th>贷方金额</th> </tr> </thead> <tbody> <tr><td>PZ001</td><td>2025-04-01</td><td>销售商品收款</td><td>银行存款</td><td>50,000.00</td><td>-</td></tr> <tr><td>PZ002</td><td>2025-04-02</td><td>采购原材料</td><td>应付账款</td><td>-</td><td>30,000.00</td></tr> <tr><td>PZ003</td><td>2025-04-03</td><td>支付工资</td><td>银行存款</td><td>20,000.00</td><td>-</td></tr> <tr><td>PZ004</td><td>2025-04-04</td><td>收到投资款</td><td>实收资本</td><td>-</td><td>100,000.00</td></tr> </tbody> </table> </section> <!-- ============ 凭证录入 ============ --> <section id="entry"> <h3>会计凭证录入</h3> <form id="accountingForm"> <div class="form-group"> <label>凭证编号</label> <input type="text" id="voucherNo" required placeholder="如:PZ005" /> </div> <div class="form-group"> <label>日期</label> <input type="date" id="date" required /> </div> <div class="form-group"> <label>摘要</label> <input type="text" id="summary" placeholder="如:销售商品收入" required /> </div> <div class="form-group"> <label>科目</label> <select id="account" required> <option value="">--选择会计科目--</option> <option value="cash">库存现金</option> <option value="bank">银行存款</option> <option value="revenue">主营业务收入</option> <option value="payable">应付账款</option> <option value="receivable">应收账款</option> <option value="expense">管理费用</option> </select> </div> <div class="form-group"> <label>借方金额</label> <input type="number" id="debit" step="0.01" placeholder="请输入借方金额" /> </div> <div class="form-group"> <label>贷方金额</label> <input type="number" id="credit" step="0.01" placeholder="请输入贷方金额" /> </div> <button type="submit">保存凭证</button> </form> </section> <!-- ============ 资产负债表 ============ --> <section id="balance-sheet"> <h3>资产负债表(示例)</h3> <table> <thead> <tr> <th>项目</th> <th>期末余额(元)</th> <th>期初余额(元)</th> </tr> </thead> <tbody> <tr><td>货币资金</td><td>150,000.00</td><td>130,000.00</td></tr> <tr><td>应收账款</td><td>80,000.00</td><td>75,000.00</td></tr> <tr><td>存货</td><td>200,000.00</td><td>190,000.00</td></tr> <tr><td><strong>资产合计</strong></td><td><strong>430,000.00</strong></td><td><strong>395,000.00</strong></td></tr> <tr><td>应付账款</td><td>60,000.00</td><td>55,000.00</td></tr> <tr><td>应交税费</td><td>20,000.00</td><td>18,000.00</td></tr> <tr><td><strong>负债合计</strong></td><td><strong>80,000.00</strong></td><td><strong>73,000.00</strong></td></tr> <tr><td><strong>所有者权益</strong></td><td><strong>350,000.00</strong></td><td><strong>322,000.00</strong></td></tr> </tbody> </table> </section> <!-- ============ 利润表 ============ --> <section id="income-statement"> <h3>利润表(示例)</h3> <table> <thead> <tr> <th>项目</th> <th>本期金额(元)</th> <th>上期金额(元)</th> </tr> </thead> <tbody> <tr><td>一、营业收入</td><td>500,000.00</td><td>450,000.00</td></tr> <tr><td>减:营业成本</td><td>300,000.00</td><td>270,000.00</td></tr> <tr><td>税金及附加</td><td>20,000.00</td><td>18,000.00</td></tr> <tr><td>销售费用</td><td>30,000.00</td><td>28,000.00</td></tr> <tr><td>管理费用</td><td>40,000.00</td><td>38,000.00</td></tr> <tr><td><strong>二、营业利润</strong></td><td><strong>110,000.00</strong></td><td><strong>96,000.00</strong></td></tr> <tr><td>加:营业外收入</td><td>5,000.00</td><td>4,000.00</td></tr> <tr><td><strong>三、利润总额</strong></td><td><strong>115,000.00</strong></td><td><strong>100,000.00</strong></td></tr> <tr><td>减:所得税费用</td><td>28,750.00</td><td>25,000.00</td></tr> <tr><td><strong>四、净利润</strong></td><td><strong>86,250.00</strong></td><td><strong>75,000.00</strong></td></tr> </tbody> </table> </section> <!-- ============ 数据可视化 ============ --> <section id="charts" class="chart-container"> <h3>财务数据可视化</h3> <p>此处可集成 ECharts 或 Chart.js 实现柱状图、折线图等。</p> <img src="https://via.placeholder.com/600x300?text=收入+支出+趋势图" alt="图表占位图" style="max-width: 100%;" /> <p><small>提示:可添加月度收入对比图、利润变化趋势图等。</small></p> </section> </div> <footer> © 2025 会计信息网络化管理系统 | 技术支持:Web开发团队 </footer> <script> // 页面切换逻辑 document.querySelectorAll(&#39;nav a&#39;).forEach(link => { link.addEventListener(&#39;click&#39;, function(e) { e.preventDefault(); const targetId = this.getAttribute(&#39;href&#39;).substring(1); // 隐藏所有 section document.querySelectorAll(&#39;.container > section&#39;).forEach(section => { section.style.display = &#39;none&#39;; }); // 显示目标页面 if (targetId === &#39;home&#39;) { document.getElementById(&#39;home&#39;).style.display = &#39;block&#39;; } else { const targetSection = document.getElementById(targetId); if (targetSection) targetSection.style.display = &#39;block&#39;; } }); }); // 表单提交处理 document.getElementById(&#39;accountingForm&#39;).addEventListener(&#39;submit&#39;, function(e) { e.preventDefault(); const voucherNo = document.getElementById(&#39;voucherNo&#39;).value; const date = document.getElementById(&#39;date&#39;).value; const summary = document.getElementById(&#39;summary&#39;).value; const account = document.getElementById(&#39;account&#39;).value; const debit = parseFloat(document.getElementById(&#39;debit&#39;).value || 0).toFixed(2); const credit = parseFloat(document.getElementById(&#39;credit&#39;).value || 0).toFixed(2); alert(`凭证已保存!\n编号:${voucherNo}\n摘要:${summary}\n借方:${debit}元\n贷方:${credit}元`); // 可在此处添加将数据插入“最近凭证记录”表格的逻辑 // 示例:动态添加一行到首页的表格中(略) }); // 默认显示首页 window.onload = () => { document.querySelectorAll(&#39;.container > section&#39;).forEach(s => s.style.display = &#39;none&#39;); document.getElementById(&#39;home&#39;).style.display = &#39;block&#39;; }; </script> </body> </html> 首页点击录入新凭证跳转录入凭证框,我需要完整代码
10-18
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值