创建添加表格

代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax GuestBook</title>
<style type="text/css">
.textline{
        BORDER-BOTTOM: #e6e6d9 1px solid;
        line-height : 150%;
}
//定义样式
<!--
body            {    font-size:10pt;text-align:center;}
dl                {    margin:0;}
dt                {    background-color:#666;color:#fff;margin:1px;padding:0 3px;}
dd                {    margin:3px;}
div                {    margin:auto;line-height:150%;text-align:left;width:600px;border:1px solid #666;}
#postBox        {    margin-top:10px;}  //给id为postBox定义样式
dd.button        {    text-align:center;} 
dd.button input    {    margin:0 20px;}    //给dd 下的 button 和input 控件定义样式
//-->
</style>
<script type="text/javascript">
<!--
//将用户输入异步提交到服务器
function ajaxSubmit(){
    //获取用户输入
    //三种获取对象值的方式
    var title=document.forms[0].title.value;
    var author=document.all("author").value;
    var content=document.theForm.content.value;
    //创建XMLHttpRequest对象
    alert(author);
}

//将用户输入显示到页面
function addToList(){
    //获取留言列表div容器
    
    var msg=document.getElementById("msgList");
    //创建dl标记及其子标记
    var dl=document.createElement("dl");
    var dt=document.createElement("dt");
    var dd=document.createElement("dd");
    var dd2=document.createElement("dd");
    var data = new Date();
    
    //将结点插入到相应的位置
    
    msg.insertBefore(dl,msg.firstChild);
    dl.appendChild(dt);
    dl.appendChild(dd);
    dl.appendChild(dd2);
    //填充留言内容
    dt.innerHTML="标题："+document.forms[0].title.value;
    dd.innerHTML="作者："+document.forms[0].author.value+" &nbsp;日期："+data.toLocaleString();
    dd2.innerHTML=document.forms[0].content.value;
    //清空用户输入框
    document.forms[0].title.value="";
    document.forms[0].author.value="";
    document.forms[0].content.value="";
}
//-->
</script>
</head>
<body>
<div id="msgList">
  <dl>
    <dt>标题：</dt>
    <dd>作者：> &nbsp;日期：></dd>
    <dd> </dd>
  </dl>
</div>
<div id="postBox">
  <form name="theForm" method="post">
    <dl>
      <dt>发表您的留言</dt>
      <dd>标题：
        <input type="text" maxlength="150" size="45" name="title"/>
      </dd>
      <dd>作者：
        <input type="text" maxlength="50" size="45" name="author"/>
      </dd>
      <dd>内容：
        <textarea rows="5" cols="65" name="content"></textarea>
      </dd>
      <dd class="button">
        <input type="button" onClick="addToList()" value="提交"/>
        <input type="reset" value="重填" onClick="ajaxSubmit()"/>
      </dd>
    </dl>
  </form>
</div>
<p>&nbsp;</p>
</body>
</html>

 

posted @ 2010-03-09 14:49  一 点  阅读(256)  评论(0)  编辑  收藏  举报