Question

我正在我的网站上工作，我想在jsp中使用javascript对html表的一列中的值求和。我找到了各种代码，可以添加已经放入的静态数据，但是当我在代码中使用相同的东西时它不起作用。

javascript如下： -

<script type="text/javascript">
var debugScript = true;

function computeTableColumnTotal(tableId, colNumber)
{       
  var result = 0;

  try
  {
    var tableElem = window.document.getElementById(tableId);           
    var tableBody = tableElem.getElementsByTagName("tbody").item(0);
    var i;
    var howManyRows = tableBody.rows.length;
    for (i=1; i<(howManyRows-1); i++) // skip first and last row (hence i=1, and howManyRows-1)
    {
       var thisTrElem = tableBody.rows[i];
       var thisTdElem = thisTrElem.cells[colNumber];            
       var thisTextNode = thisTdElem.childNodes.item(0);
       if (debugScript)
       {
          window.alert("text is " + thisTextNode.data);
       } // end if

       // try to convert text to numeric
       var thisNumber = parseFloat(thisTextNode.data);
       // if you didn't get back the value NaN (i.e. not a number), add into result
       if (!isNaN(thisNumber))
         result += thisNumber;
     } // end for

  } // end try
  catch (ex)
  {
     window.alert("Exception in function computeTableColumnTotal()\n" + ex);
     result = 0;
  }
  finally
  {
     return result;
  }

}

function finishTable()
{
  if (debugScript)
    window.alert("Beginning of function finishTable");

    var tableElemName = "hikeTable";
        //idhar column define kar raha hai wo
  var totalMilesPlanned = computeTableColumnTotal("hikeTable",2);
  var totalMilesHiked = computeTableColumnTotal("hikeTable",3);

    try 
  {
    var totalMilesPlannedElem = window.document.getElementById("totalMilesPlanned");
    document.getElementById("total_1").innerHTML = totalMilesPlanned;
    var totalMilesHikedElem = window.document.getElementById("totalMilesHiked");
    document.getElementById("total_2").innerHTML = totalMilesHiked ;

   }
   catch (ex)
   {
     window.alert("Exception in function finishTable()\n" + ex);
   }

   return;
}
</script>

当html表格像

时，这是有效的

<html>
<body onload="finishTable();">
<tbody>
<table  id="hikeTable" align="center" border="1" bordercolor="lightslategray">
   <tr>
      <th scope="col">Locations</th>
      <th scope="col"> Date </th>
      <th >Miles (planned)</th>
      <th>Miles (actual)</th>

    </tr>
    <tr>
      <td>Alapocas Woods </td>
      <td>02/18/06</td>
      <td>1324</td>
      <td>1</td>

    </tr>

<tr>
      <td>Alapocas </td>
      <td>02/18/06</td>
      <td>1176576523</td>
      <td>23</td>

    </tr>

<tr>
      <td>Alapocas </td>
      <td>02/18/06</td>
      <td>67</td>
      <td>98</td>
    </tr>
<tr>
      <td colspan="2">Total </td>   
      <td id="total_1"></td>
      <td id="total_2"></td>
    </tr>
</tbody>
<table>
</html>

但是我的表是这样的： -

<html>
<body onload="finishTable();">
<tbody>
<table  id="hikeTable" align="center" border="1" bordercolor="lightslategray">
   <tr>
      <th scope="col">Locations</th>
      <th scope="col"> Date </th>
      <th >Miles (planned)</th>
      <th>Miles (actual)</th>

    </tr>
<%Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:dir","hr","hr");
java.sql.Statement statement = conn.createStatement();
java.sql.ResultSet rs = statement.executeQuery(searchquery);

while(rs.next()){
int buildarea = rs.getInt("build_area");
int numberoflevels = rs.getInt("no_of_levels");
%>
    <tr>
      <td>Alapocas Woods </td>
      <td>02/18/06</td>
      <td><%=buildarea%></td> //here a value comes from database
      <td>1</td>

    </tr>

<tr>
      <td>Alapocas </td>
      <td>02/18/06</td>
      <td>bumberoflevels</td>
      <td>23</td>

    </tr>


      <td colspan="2">Total </td>   
      <td id="total_1"></td>
      <td id="total_2"></td>
    </tr>
</tbody>
<%}%>
<table>
</html>

请帮助!!

Answer 1

只是一些人：

int totalBuildArea = 0;
int totalNoOfLevels = 0;
while(rs.next()){
int buildarea = rs.getInt("build_area");
int numberoflevels = rs.getInt("no_of_levels");
%>
...
...

总行应该不在循环中。

...
...
totalBuildArea += buildarea ;
totalnumberOfLevels  += numberoflevels  ;
<%}%>
<td colspan="2">Total </td>   
      <td id="total_1"><%=totalBuildArea %></td>
      <td id="total_2"><%=totalnumberOfLevels %></td>

那就是说，

你在做什么 根本听起来不正确 首先，从JSP访问数据库不是一个好主意。你需要的是一个好的三轮胎架构。您可以使用struts之类的框架。或者至少拥有自己的Business Logic类，并从servlet中调用它们。

即使这是出于某种原因的唯一方式，您的JSP本身看起来也不正确。

考虑一下：

<tr>
      <td>Alapocas Woods </td>
      <td>02/18/06</td>
      <td><%=buildarea%></td> //here a value comes from database
      <td>1</td>

    </tr>

<tr>
      <td>Alapocas </td>
      <td>02/18/06</td>
      <td>bumberoflevels</td>
      <td>23</td>

部分数据是硬编码的。部分数据来自数据库。列不对。 <tr>s不要结束。对我来说，这看起来不像实际的代码。或者它是，你没有完全努力提供所有的细节。

尝试使用JSP。想出一个你想要的结构。可能有件你不知道怎么做。那样就好。问他们问题。我们随时为您提供帮助。

但我们只有在您提出proper question时才能提供帮助。一个简单的规则：想象一下，你正试图回答这个问题。

Answer 2

我是否想要使用servlet或JSP本身进行数据库调用。流程几乎相同。

首先，您创建一个用于在UI上表示数据的类。您有一组（位置，日期，计划里程和实际里程），然后是总计。

您可能想要创建一个类来表示这一点（我已经从HTML的id组成了名称，您可能希望提供更好的名称）：

class Hike
{
    private String location;
    private Date date;
    private Integer builtArea;
    private Integer numberOfLevels;
    //And their getters and setters
}

和HikeData类

class HikeData
{
    private List<Hike>;
    private Integer totalBuiltArea;
    private Integer totalNumberOfLevels;
    //And their getters and setters
}

//数据库调用部分很好：

<%Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = DriverManager
                  .getConnection("jdbc:oracle:thin:@localhost:1521:dir","hr","hr");
java.sql.Statement statement = conn.createStatement();
java.sql.ResultSet rs = statement.executeQuery(searchquery);

//Fetch the data and populate the above classes
int totalBuiltArea = 0;
int totalNumberOfLevels = 0;
List<Hike> hikeList = new ArrayList<Hike>();
while(rs.next()){
    Hike hike = new Hike();

    hike.setLocation(rs.getString("location"));
    hike.setDate(rs.getDate("date")));

    int builtArea = rs.getInt("build_area");
    hike.setBuiltArea(builtArea);

    int numberOfLevels = rs.getInt("no_of_levels");
    hike.setNumberOfLevels(numberOfLevels);

    totalBuiltArea+= builtArea;
    totalNumberOfLevels += numberOfLevels;
    hikeList.add(hike);
}

HikeData hikeData = new HikeData();
hikeData.setHikeList(hikeList);
hikeData.setTotalNumberOfLevels(totalNumberOfLevels);
hikeData.setTTotalBuiltArea(totalBuiltArea);

//Add the class to request
request.setAttribute("hikeData", hikeData);

HTML表格部分现在更简单：

<table  id="hikeTable" align="center" border="1" bordercolor="lightslategray">
   <tr>
      <th scope="col">Locations</th>
      <th scope="col"> Date </th>
      <th >Miles (planned)</th>
      <th>Miles (actual)</th>

    </tr>
<%HikeData hikeData = request.getAttribute("hikeData");
for(Hike hike : hikeData.getHikeList())
{%>
<tr>
      <td><%=hike.getLocation()%></td>
      <td><%=hike.getDate()%></td>
      <td><%=hike.getBuiltArea()%></td> //here a value comes from database
      <td><%=hike.getnumberOfLevels()%></td>

</tr>
<%}>%>
<tr>

    <td colspan="2">Total </td>   
    <td id="total_1"><%=hikeData.getTotalNumberOfLevels()%></td>
    <td id="total_2"><%=hikeData.getTotalBuiltArea()%></td>
</tr>

如果您正在使用servlet，则将数据库部分移动到servlet或从servlet调用的服务类。

如果您继续使用JSP，那么您在JSP本身就拥有所有这些。

我知道添加到请求然后检索是多余的，但我已经这样做了，所以如果你决定将它移出JSP，那就更容易了。

结束时注意：这绝对不是编写Web应用程序的最佳方式。有框架可以使您的工作更轻松，并且应用程序可维护和可扩展。对于控制器（servlet）部分，您可以使用众所周知的struts框架，[Spring Web flow][2]或非常简单的Apache Wicket。对于业务逻辑部分，您可以使用EJB3或spring。对于数据库访问，您可以使用hibernate。

这些都不是强制性的，但至少拥有一个MVC框架总是好的，而不是数据库和业务逻辑。 Struts让你的生活变得轻松。

如何使用javascript对jsp中从数据库生成的html表的列进行求和？

2 个答案: