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

JS,Jquery及ExtJs不同脚本动态创建DOM对象2013-10-18本文介绍简单使用JavaScript、JQuery、ExtJs进行DOM对象创建的测试，主要是使用JavaScript、JQuery、ExtJs动态创建Table对象、动态Table数据填充、多选控制。

1.简单前台数据处理界面有点丑了，没美化界面，主要是JavaScript动态创建Table。效果图：

<！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>Js创建Dom对象</title><script type="text/javascript" language="javascript">function blurMessage（） {//输入姓名失去光标var varName = document.getElementById（"txtName"）;var varMessgae = document.getElementById（"txtMessage"）;if （varName.value ！= null && varName.value.length <= 0） {alert（"请输入姓名！"）;return;}varMessgae.innerHTML = varName.value + "说：";varName.value = ""; //清空内容}function showMessage（） {//显示提交的信息var message = document.getElementById（"txtMessage"）.value;var date = new Date（）.toLocaleDateString（）;var time = new Date（）.toLocaleTimeString（）;if （！message） {alert（"请输入信息内容！"）;return;}//获取显示表格对象var tab = document.getElementById（"tabMessage"）;var tr = tab.insertRow（1）;var td1 = tr.insertCell（-1）;td1.innerHTML = message;var td2 = tr.insertCell（-1）;td2.innerHTML = date;var td3 = tr.insertCell（-1）;td3.innerHTML = time;document.getElementById（"txtMessage"）.value = "";}</script></head><body><p id="pContain" style="width: 600px"><p id="pMessage"><table id="tabMessage" cellpadding="0" cellspacing="0" border="1" style="width: 100%;background-color: Yellow; border-width: 2px; border-bottom-width: 3px"><tr><th>留言信息</th><th>日期</th><th>时间</th></tr></table></p><p id="pSubmitMessage"><h3>请填写你宝贵的建议：</h3><p><input type="radio" id="rbNoName" onclick="txtName.style.display="none";txtMessage.innerHTML = "匿名说：";"value="NoName" name="rbGroup"/>匿名<input type="radio" id="rbName" onclick="txtName.style.display=""" value="Name" name="rbGroup"/>实名<input type="text" id="txtName" style="display: none" onblur="blurMessage（）"/><br/><textarea id="txtMessage" cols="110" rows="5" style="width: 100%"></textarea><br/><input type="button" id="btnSubmit" onclick="showMessage（）" style="float: right;margin-top: 10px;" value="提交信息"/></p></p></p></body></html>