一、动态加载表格
1首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
<div id="tdl"><div>
2在javascript中写添加表格的语句
若在当前html文件中，则写在<script>标签内部，如
代码如下:
<script type="text/javascript" >
documentgetElementById("tbl")innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建
</script>
若是通过引入js文件，则在js文件（假设是testjs）中直接写如下语句
代码如下:
documentgetElementById("tbl")innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
代码如下:
<script type="text/javascript" src="testjs"></script>
二、 动态添加表格行
1首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
代码如下:
<table>
<thead></thead>
<tfoot><tfoot> //tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]\n
2在javascript内容中，要先创建行和单元格，再在<tbody>中添加行，如下
[code]
row=documentcreateElement("tr"); //创建行
td1=documentcreateElement("tr"); //创建单元格
td1appendChild(documentcreateTextNode("content")); //为单元格添加内容
rowappendChild(td1); //将单元格添加到行内
documentgetElementById("rows")append(row); //将行添加到<tbody>中
html只能通过ajax接口跟后台数据库接口通信，然后取出来的数据在页面上显示。
以下是一个例子：
html文件suggesthtml：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript" src="ajax_searchjs"></script>
<style type="text/css" media="screen">
body {
font: 11px arial;
}
suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
cursor:hand;
}
suggest_link_over {
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position:relative;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
left: -12px;
top: 1px;
height: 74px;
width: 170px;
display:none;
}
</style>
</head>
<body background="bggif">
<center>
<h3>实现搜索提示</h3>
<div style="width: 500px;">
<input type="text" id="txtSearch" name="txtSearch" onKeyUp="searchSuggest();" autocomplete="off" />
<input type="submit" id="cmdSearch" name="cmdSearch" value="搜索"/><br />
<div id="search_suggest"></div>
</div>
</center>
</body>
</html>
ajax_searchjs：
var searchReq = createAjaxObj();
function createAjaxObj()
{
var httprequest=false;
if (windowXMLHttpRequest) //为非IE浏览器生成XmlHttpRequest对象
{
httprequest=new XMLHttpRequest()
if (httprequestoverrideMimeType) httprequestoverrideMimeType('text/xml')
}
else if (windowActiveXObject) //为IE浏览器生成XmlHttpRequest对象
{
try
{
httprequest=new ActiveXObject("Msxml2XMLHTTP");
}
catch (e)
{
try
{
httprequest=new ActiveXObject("MicrosoftXMLHTTP");
}
catch (e){}
}
}
return httprequest
}
function searchSuggest()
{
if (searchReqreadyState == 4 || searchReqreadyState == 0)
{
var str = escape(documentgetElementById('txtSearch')value);
searchReqopen("GET", 'searchsearch=' + str, true);//向服务器端发送请求
searchReqonreadystatechange = handleSearchSuggest; //设置回调函数
searchReqsend(null);
}
}
function handleSearchSuggest()
{ //这是回调函数，处理从服务器端返回的信息
if (searchReqreadyState == 4)
{
var ss = documentgetElementById('search_suggest')
ssinnerHTML = '';
var str = searchReqresponseTextsplit("\n");
for(i=0; i < strlength - 1; i++)
{
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(thisinnerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ssinnerHTML += suggest;
ssstyledisplay="block";
}
}
}
function suggestOver(div_value)
{
div_valueclassName = 'suggest_link_over';
}
function suggestOut(div_value)
{
div_valueclassName = 'suggest_link';
}
function setSearch(value)
{
documentgetElementById('txtSearch')value = value;
documentgetElementById('search_suggest')innerHTML = '';
documentgetElementById('search_suggest')styledisplay="none";
}
servlet文件SearchSuggestjava：
package com;
import javasqlConnection;
import javasqlDriverManager;
import javasqlResultSet;
import javasqlSQLException;
import javasqlStatement;
import javautilArrayList;
import javaxservletServletException;
import javaxservlethttpHttpServlet;
import javaxservlethttpHttpServletRequest;
import javaxservlethttpHttpServletResponse;
public class SearchSuggest extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, javaioIOException
{
responsesetCharacterEncoding("UTF-8");
String search = requestgetParameter("search"); //接受参数值
String sql = "select GoodsName from Goods where GoodsName like '"+search+"%' order by GoodsName";//设置查询语句
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
ArrayList vData = new ArrayList();
javaioPrintWriter out = responsegetWriter();
try {
ClassforName("sunjdbcodbcJdbcOdbcDriver"); //注册数据库连接驱动
String MdbPath = "F:/sneaker/Tomcat/webapps/search/database/#costumemdb";
String url= "jdbc:odbc:driver={Microsoft Access Driver (mdb)};DBQ=" + MdbPath ;
conn = DriverManagergetConnection(url);
stmt = conncreateStatement();
rs = stmtexecuteQuery(sql); //执行查询
while (rsnext())
{
vDataadd(rsgetString("GoodsName"));
}
StringBuilder buf = new StringBuilder();
for (int i=0;i<vDatasize();i++)
{
String keyword = (String)vDataget(i);
bufappend(keyword+"\n");
}
outprint(buftoString());//向客户端输出信息
} catch (Exception e) {
eprintStackTrace();
} finally {
try {
if (stmt != null)
stmtclose();
if (conn != null)
connclose();
} catch (SQLException sqle) {
}
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, javaioIOException
{
doPost(request, response);
这个当然可以，用java的servlet技术就完全可以实现这一功能。写点示例代码：
在servlet类里德service方法里可以实例printwrite类，可以通过printwrite类来直接像客户端输出html代码
：PrintWrite out=new PrintWrite();
outprint("<html><head></head><body><span>这是一句简单的话<span></body></html>");
以上就可以输出一个最简单的html页面。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）