增加一个table

原创于 2009-06-26 11:55:00 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #class #border #calendar #input #div

本文介绍了一个使用JavaScript动态生成表格的方法，可以根据输入的数字创建多个带有特定样式的HTML表格，每个表格用于记录不同阶段的工作情况，包括工作内容、时限、提醒方式等。

function add(number1){
var number=trim(number1.value);
if(isNaN(number)){
    alert("请输入数字!");
  }
if(isNaN(number)==false){
    var str="";
for (i=0;i<(number-1);i++){
  str+="<table border='0' align='center' cellpadding='3' cellspacing='1' bordercolor='#aaaeff'"+
" bordercolordark='#FFFFFF' bgcolor='#9999FF' id='table"+(i+2)+"'>"+
" <tr bgcolor='F2F8FF'>"+
   "<td colspan='4' align='right' class='zt STYLE1' ><div align='left'>第"+(i+2)+"<input type='hidden' name='stage"+(i+2)+"' value='"+(i+2)+"'> 阶段工作情况:"+
          "</td>"+
     "</tr>"+
  "<tr bgcolor='F2F8FF'>"+

  " <td width='128' align='right' class='zt STYLE1' >工作内容:</td>"+
     " <td colspan='3' class='zt STYLE1' ><span style='font-size: 12px'>"+
     "    <textarea name='workcontent"+(i+2)+"' cols='85' rows='4' class='border1' id='workcontent"+(i+2)+"' style='height: 50px'></textarea>"+
     " </span></td> "+
     " </tr> "+
  " <tr bgcolor='F2F8FF'>"+
  " <td width='128' align='right' class='zt STYLE1' >工作时限:</td>"+
   " <td width='225' bgcolor='F2F8FF' class='zt'>"+
      " <input name='workstartdate"+(i+2)+"' type='text' class='border1' id='workstartdate"+(i+2)+"' onfocus='calendar()' value='<%=dd %>'>"+
      " <span class='STYLE1'>起</span> </td>"+
  " <td width='141' align='right' class='zt STYLE1'>至:</td>"+
  "    <td width='255' bgcolor='F2F8FF' class='zt'>"+
  " <input name='workenddate"+(i+2)+"' type='text' class='border1' id='workenddate"+(i+2)+"' onfocus='calendar()' value='<%=dd %>' >"+
  " <span class='STYLE1'>止</span></td>"+
  " </tr>"+
  " <tr>"+
  " <td width='128' align='right' bgcolor='#F2F8FF' class='zt STYLE1' >提醒方式:</td>"+
  " <td colspan='3' bgcolor='#F2F8FF' class='zt'><label>"+

        " <div align='left'>"+
     "    <input type='checkbox' name='remindtype"+(i+2)+"' id='remindtype"+(i+2)+"' value='短信' class='zt STYLE1'>"+
     "    <span class='STYLE1'>短信提醒</span> "+
     " <input type='checkbox' name='remindtype"+(i+2)+"' id='remindtype"+(i+2)+"' value='即时通讯' class='zt STYLE1'>"+
  " <span class='STYLE1'>即时通讯提醒</span></div>"+
  " </label></td>"+
  "</tr>"+
  "<tr>"+
  " <td width='128' align='right' bgcolor='#F2F8FF' class='zt STYLE1' >提醒起始时间:</td>"+
  " <td width='225' bgcolor='#F2F8FF' class='zt'>"+
     " <input name='remindstartdate"+(i+2)+"' type='text' class='border1' id='remindstartdate"+(i+2)+"' onfocus='calendar()' value='<%=dd %>' >"+
     " <span class='STYLE1'>       起</span> </td>"+
     "  <td width='141' align='right' bgcolor='#F2F8FF' class='zt STYLE1'>提醒截止时间:</td>"+
  "    <td width='255' bgcolor='#F2F8FF' class='zt'>"+
  " <input name='remindenddate"+(i+2)+"' type='text' class='border1' id='remindenddate"+(i+2)+"' onfocus='calendar()' value='<%=dd %>' >"+
  " <span class='STYLE1'>止</span></td>"+
  "</tr>"+
  "<tr>"+
  " <td bgcolor='#F2F8FF'><div align='right' class='STYLE1'><span class='zt'>备注:</span></div></td>"+
  " <td colspan='3' align='right' bgcolor='#F2F8FF' class='zt'><div align='left' class='STYLE1'><span style='font-size: 12px'>"+
  "   <textarea name='stageremark"+(i+2)+"' cols='85' rows='5' class='border1' id='stageremark"+(i+2)+"' style='height: 50px'></textarea>"+
        " </span></div>     <div align='right' class='STYLE1'></div>      </td>"+
     " </tr></table><br>";
  }
  str+="<div align='center'>"+
      "   <input name='Submit' type='submit' class='border1' value='保存'>"+
      " </div>";

    addtablses.innerHTML=str;