JS,Jquery,ExtJs不同脚本动态创建DOM对象

好久不来写东西了，这段时间太慢了，闲了下来看了几篇文章，觉得很好，同时也许咱们大家都能遇到，所以就把它记录下来...

简单使用JavaScript、JQuery、ExtJs进行DOM对象创建的测试，主要是使用JavaScript、JQuery、ExtJs动态创建Table对象、动态Table数据填充、多选控制。

1.简单前台数据处理
界面有点丑了，没美化界面，主要是JavaScript动态创建Table。效果图：
JS,Jquery,ExtJs不同脚本动态创建DOM对象

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4      <title>Js创建Dom对象</title>
 5      <script type="text/javascript" language="javascript">
 6  
 7          function blurMessage() {
 8              //输入姓名失去光标
 9              var varName = document.getElementById("txtName");
10              var varMessgae = document.getElementById("txtMessage");
11              if (varName.value != null && varName.value.length <= 0) {
12                  alert("请输入姓名！");
13                  return;
14              }
15  
16              varMessgae.innerHTML = varName.value + "说：";
17              varName.value = ""; //清空内容
18          }
19  
20          function showMessage() {
21              //显示提交的信息
22              var message = document.getElementById("txtMessage").value;
23              var date = new Date().toLocaleDateString();
24              var time = new Date().toLocaleTimeString();
25              if (!message) {
26                  alert("请输入信息内容！");
27                  return;
28              }
29              //获取显示表格对象
30              var tab = document.getElementById("tabMessage");
31              var tr = tab.insertRow(1);
32              var td1 = tr.insertCell(-1);
33              td1.innerHTML = message;
34              var td2 = tr.insertCell(-1);
35              td2.innerHTML = date;
36              var td3 = tr.insertCell(-1);
37              td3.innerHTML = time;
38  
39              document.getElementById("txtMessage").value = '';
40          }
41      
42      </script>
43  </head>
44  <body>
45      <div id="divContain" style="width: 600px">
46          <div id="divMessage">
47              <table id="tabMessage" cellpadding="0" cellspacing="0" border="1" style="width: 100%;
48                  background-color: Yellow; border-width: 2px; border-bottom-width: 3px">
49                  <tr>
50                      <th>
51                          留言信息
52                      </th>
53                      <th>
54                          日期
55                      </th>
56                      <th>
57                          时间
58                      </th>
59                  </tr>
60              </table>
61          </div>
62          <div id="divSubmitMessage">
63              <h3>
64                  请填写你宝贵的建议：
65              </h3>
66              <div>
67                  <input type="radio" id="rbNoName" onclick="txtName.style.display='none';txtMessage.innerHTML = '匿名说：';"
68                      value="NoName" name="rbGroup" />匿名
69                  <input type="radio" id="rbName" onclick="txtName.style.display=''" value="Name" name="rbGroup" />实名
70                  <input type="text" id="txtName" style="display: none" onblur="blurMessage()" />
71                  <br />
72                  <textarea id="txtMessage" cols="110" rows="5" style="width: 100%"></textarea>
73                  <br />
74                  <input type="button" id="btnSubmit" onclick="showMessage()" style="float: right;
75                      margin-top: 10px;" value="提交信息" />
76              </div>
77          </div>
78      </div>
79  </body>
80  </html>

View Code