大神来指点下如何用JS实现重复为HTML模版填值

需要用网页实现批量的打印报表的功能，创建了HTML模版如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    <script type="text/javascript">
function Print()
{
//document.body.innerHTML=document.getElementById('myprint').innerHTML;
document.getElementById('opBtn').style.display="none";              
window.print();//var res = csharpActiveX.Print("Print/HandlerPrint.ashx?StuNo='"+@StuNo+"'&LSH='"+@Id+"'");//            if (res == 'success') {
//                
//                setTimeout("window.location = '/Web/Student/charge/chargeStudent.aspx'", 2000);
//                //;
//            } else if (res == 'reqError') {
//                alert("已打票，但是缴费单状态未成功更新");
//            }
  
}
    </script>    <style type="text/css">
        #myprint
        {
            width: 540px;
            height: 315px;
            border: 0px solid black;
            border: 0px solid black;
            margin: 0 auto;
            background-image: url(   'bbb.jpg' );
        }
        #myprint .title
        {
            font-family: 黑体;
            font-size: 16px;
            height: 13px;
            color: Black;
            display: block;
            text-align: center;
            width: 80%;
            margin: 0 auto;
        }
        #myprint .caption .container
        {
            width: 175px;
            display: inline-block;
            float: left;
        }
        .caption
        {
            border: 0px solid black;
            border-bottom-style: none;
        }
        .txt
        {
            margin-left: 8px;
        }
        .caption .txt
        {
            margin-left: 33px;
        }
        .lbl, .txt
        {
            font-size: 12px;
            font-family: 宋体;
            color: Black;
        }
        .lbl
        {
            margin-right: 8px;
        }
        table
        {
            width: 100%;
        }
        #myprint .caption .container, th, td, .lbl, .txt
        {
            height: 24px;
            line-height: 24px;
        }
        #csharpActiveX
        {
            height: 63px;
            width: 950px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <object id="csharpActiveX" classid="clsid:6F9B9BE1-EA4F-45ae-AFC1-12BC95ADDC41">
    </object>
    <div id="myprint">
        <label class="title lbl">
            学生收费票据</label>
        <br />
        <label class="code  lbl">
            收费单编号:</label><span class="txt">@LSH</span>
        <br />
        <div class="caption">
            <div class="container">
                <label class="lbl">
                    学号:</label><span class="stuNo txt">@StuNo</span></div>
            <div class="container">
                <label class="lbl">
                    姓名:</label><span class="stuName txt">@StuName</span></div>
            <div class="container">
                <label class="lbl">
                    班级:</label><span class="stuCls txt">@Class</span></div>
        </div>
        <table border="1" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <th>
                    <span class="lbl">年度</span>
                </th>
                <th>
                    <span class="lbl">收费项目</span>
                </th>
                <th>
                    <span class="lbl">收费标准</span>
                </th>
                <th>
                    <span class="lbl">收费金额</span>
                </th>
            </tr>
            <tr>
                <td>
                    <span class="txt">@StuYear1</span>
                </td>
                <td>
                    <span class="txt">学费</span>
                </td>
                <td>
                    <span class="txt">@CostGJPrice1</span>
                </td>
                <td>
                    <span class="txt">@StuFlat1</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="txt">@StuYear2</span>
                </td>
                <td>
                    <span class="txt">住宿费</span>
                </td>
                <td>
                    <span class="txt">@CostGJPrice2</span>
                </td>
                <td>
                    <span class="txt">@StuFlat2</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="txt"></span>
                </td>
                <td>
                    <span class="txt"></span>
                </td>
                <td>
                    <span class="txt"></span>
                </td>
                <td>
                    <span class="txt"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="txt"></span>
                </td>
                <td>
                    <span class="txt"></span>
                </td>
                <td>
                    <span class="txt"></span>
                </td>
                <td>
                    <span class="txt"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="lbl">合计</span>
                </td>
                <td colspan="2">
                    <span class="lbl">人民币（大写）</span><span class="txt">@HeJi</span>
                </td>
                <td>
                </td>
            </tr>
        </table>
        <div class="caption">
            <div class="container">
                <label class="lbl">
                    制单人:</label><span class="stuNo txt">@zhidanren</span></div>
            <div class="container">
                <label class="lbl">
                    收款人:</label><span class="stuName txt">@ShouKuanRen</span></div>
        </div>
    </div>
    <div id="opBtn" style="width: 80%; margin: 0 auto; text-align: center; margin-top: 20px;">
        
        <input type="button" value="打印" onclick="Print()" />
        <input type="button" value="取消" onclick="goBack()" />
    </div>
    </form>
</body>
</html>CS代码如下：
protected void FindPrint_Click(object sender, EventArgs e)
    {
       //省略获得各种值的代码
            DateTime PubTime = DateTime.Now;
            //string UserName = Session["UserName"].ToString();
            // Response.Write(NewsKindName);
            string zhidanren = "系统制单";
            string ShouKuanRen = "";
            if(Session["str_LoginName"]!=null){
                ShouKuanRen = Session["str_LoginName"].ToString();
            }
            string result = Convert.ToString(Convert.ToInt32(StuFlat1) + Convert.ToInt32(StuFlat2));
            string HeJi = Num2Char(result);
            string Id = i;
            string[] strNewsHtml = new string[] {Id, LSH, StuNo, StuName, Class, StuYear1, StuYear2, CostGJPrice1, StuFlat1, CostGJPrice2, StuFlat2, zhidanren, ShouKuanRen, HeJi };            string[] strOldHtml = new string[] {"@Id", "@LSH", "@StuNo", "@StuName", "@Class", "@StuYear1", "@StuYear2", "@CostGJPrice1", "@StuFlat1", "@CostGJPrice2", "@StuFlat2", "@zhidanren", "@ShouKuanRen", "@HeJi" };
            string strFileName = DateTime.Now.ToString("yyddhhmmss") + ".html";
            string strFilePath = string.Format("Print/PrintHtml/{0}", strFileName);
            try
            {
                if (Files.CreatHtmlPage(strNewsHtml, strOldHtml, "PrintModel.htm", strFilePath))
                {
                    this.Response.Write("<script language=javascript>window.open('Print/PrintHtml/" + strFileName + "','newwindow','width=500,height=400')</script>");
                    //ClientScript.RegisterStartupScript(this.GetType(), new Guid().ToString(), "<script>window.showModalDialog('Print/PrintHtml/" + strFileName + "','_blank','width=200,height=200')</script>");
                                        //this.LabMessage.Text = "生成成功！";
                }
               
    public static bool CreatHtmlPage(string[] strNewsHtml, string[] strOldHtml, string strModeFilePath, string strPageFilePath)
    {
        bool Flage = false;
        StreamReader ReaderFile = null;
        StreamWriter WrirteFile = null;
        string FilePath = HttpContext.Current.Server.MapPath(strModeFilePath);
        Encoding Code = Encoding.GetEncoding("utf-8");
        string strFile = string.Empty;
        try
        {
            ReaderFile = new StreamReader(FilePath, Code);
            strFile = ReaderFile.ReadToEnd();        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            ReaderFile.Close();
        }
        try
        {
            int intLengTh = strNewsHtml.Length;
            for (int i = 0; i < intLengTh; i++)
            {
                strFile = strFile.Replace(strOldHtml[i], strNewsHtml[i]);
            }
            WrirteFile = new StreamWriter(HttpContext.Current.Server.MapPath(strPageFilePath), false, Code);
            WrirteFile.Write(strFile);
            Flage = true;
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {            WrirteFile.Flush();
            WrirteFile.Close();
        }
        return Flage;
    } 
想要实现一个模版填充N组数据，静态页应该怎么用JS实现，或者用别的方法，求大神指点。javascripthtml报表