最近写了一个jsp页面,页面内table表格数据内容是foreach获取的 ,点击添加就会加入一行,然后计算某一列的合计值。对此简单记录一下个人的解决方法
如图在添加一条数据后文件的文字长度 总字数都会根据添加文稿而改变 ,计算总文字长度 和总字数 就要获取文字长度 与总字数每一列的值 然后相加,一开始我面对的问题是 把文字长度的 td与总字数的td用 id 命名 然后获取id的值相加。。
这样导致的结果是 我每次新增一条数据 每次拿到的id值都是同一个 所以我改变了之前的想法 既然拿td没有作用 我就想到了 拿每一行的tr,td的id值保持不变 只用每一行tr的行值来区分。下面看代码
<table class='table table-bordered table-striped' style='margin-bottom:0;'id="storyboardtable"> <thead> <tr> <th>序号</th> <th >类别</th> <th>标题</th> <th>状态/内容</th> <th>文字长度</th> <th>总字数</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${}" var="detail"> <tr data-index="${}" data-article-id='<c:if test="${detail.article != null}">${detail.article.id}</c:if>'> <td>${detail.orderValue + 1}</td> <td> <c:choose> <c:when test="${detail.article != null}">文稿</c:when> <c:otherwise>导语</c:otherwise> </c:choose> </td> <td> </td> <td> <c:choose> <c:when test="${detail.article != null}"> <c:choose> <c:when test="${detail.article.task != null}">${detail.article.task.name }</c:when> <c:otherwise>已完成</c:otherwise> </c:choose> </c:when> </c:choose> </td> <td class="articlelength">${detail.articleLength}</td> <td hidden class="hcontext">${detail.article.content}"</td> <td class="scontext"></td> <td> </td> </tr> </c:forEach> </tbody> </table>
这是table表格 然后 看一下我写的处理方法:
function checkContentLengthSum() {
var $trs= $("#storyboardtable tbody tr:visible");
var sums = 0;
var timesums = 0;
for (var i = 0;i<$trs.length;i++) {
var timesum =$($trs[i]).closest("tr").find(".articlelength").text();
var sum =$($trs[i]).closest("tr").find(".hcontext").text();
}
}
这是我根据tr的行值来进行获取每一列的值,根据tr的长度 可以动态的获取表格内的数据,无论新增还是删除数据 都会根据表格tr的长度获取。第一次发这种文章,,,写的不好 主要是为了记录一下自己的代码。