ฉันเพิ่งอ่านหนังสือของ O'Reilly สามเล่ม ซึ่งโดยทั่วไปเราเรียกว่าหนังสือสัตว์ร้าย (ชื่อของเพื่อนร่วมชั้นคนหนึ่งของฉันคล้ายกับของฉันมาก 555) และฉันอยากทำตัวอย่างเพื่อฝึกฝนทักษะของฉันมาโดยตลอด เนื่องจากหลายบริษัทใช้ รูปแบบแบบไดนามิก ดังนั้น ฉันพยายามใช้ js เพื่อสร้างรูปแบบแบบไดนามิก และใช้เบราว์เซอร์ firfox เพื่อแก้ไขข้อบกพร่อง เนื่องจากปลั๊กอิน firbug ใช้งานได้ดีกว่า เดิมทีฉันต้องการใช้ฟังก์ชันเล็กๆ น้อยๆ ต้องการทำมากเพียงคลิกปุ่มเพื่อเพิ่มแถว แล้วก็เพิ่มมากขึ้นเรื่อยๆ และพวกเขาก็สวยงามมากขึ้นเรื่อยๆ โพสต์ซอร์สโค้ดเพื่อให้ทุกคนสามารถเรียนรู้ร่วมกัน หากคุณมีคำถามใด ๆ คุณสามารถแก้ไขได้ หากคุณเป็นมือใหม่ใน js โปรดมีเมตตา
PS: ฉันไม่รู้ว่าทำไมหมายเลขบรรทัดจึงไม่แสดงด้านบน ฉันไม่ได้ใช้มันมานานแล้ว บันทึกย่อเขียนไว้อย่างชัดเจนและทุกคนสามารถเรียนรู้ร่วมกันได้
คัดลอกรหัสรหัสดังต่อไปนี้:
<span style="font-size:18px;"><!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">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ตารางไดนามิก</title>
<style type="text/css">
เนื้อความ { สีพื้นหลัง: #9CC การจัดตำแหน่งข้อความ: center}
ตาราง { ขอบ: 10px อัตโนมัติ;}
tr th { เส้นขอบ: 1px ทึบ #096;}
td {เส้นขอบ: 1px ทึบ #096;}
</สไตล์>
<script type="text/javascript">
/*มีเพียงตัวแปรบางตัวเท่านั้นที่สามารถประกาศนอกฟังก์ชันได้ และวิธีการดำเนินการไม่สามารถใช้ได้เนื่องจากไม่มีฟังก์ชันให้เรียกใช้และดำเนินการ -
//เมื่อโหลดหน้าเว็บ ให้ใส่กล่องตัวเลือกไว้ที่ส่วนหัวของตาราง เนื่องจากเป็นการใช้งานเพียงครั้งเดียว
window.onload = ฟังก์ชั่น () {
แท็บ var = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
//เพิ่มกล่องตัวเลือกให้กับแถวและคอลัมน์แรก
var inp = document.createElement('อินพุต');
inp.type = 'ช่องทำเครื่องหมาย';
//การลงทะเบียนกิจกรรม DOM ระดับ 2
catchEvent(inp,'click',function(){ //ลงทะเบียนฟังก์ชันเพื่อตัดสินสถานะต่างๆ
ถ้า (inp.checked ==true) {
ทั้งหมดเลือก();
}อื่น{
ยกเลิกเลือก();
-
-
//catchEvent(inp,'คลิก',allSelect);
//catchEvent(inp,'change',cancelSelect);
childtd[0].ผนวกเด็ก(inp);
-
//เพิ่มแถว
//var count =0;//เพิ่มคอลัมน์สำหรับการนับ
ฟังก์ชัน addRow(){
//นับ++;
แท็บ var = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
var tr = document.createElement('tr');
var arrtd = อาร์เรย์ใหม่ ();
var arrinp = อาร์เรย์ใหม่ ();
สำหรับ (var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arrinp[i] = document.createElement('อินพุต');
ถ้า(i==0){
arrinp[i].type = 'ช่องทำเครื่องหมาย';
arrinp[i].name = 'กล่องเลือก';
} อื่นถ้า(i==1){
//arrinp[i] = document.createTextNode(นับ);
arrinp[i] = document.createTextNode('');
-
arrtd[i].appendChild(arrinp[i]);//ลองคิดดูว่าเหตุใดอินพุตจึงต้องเพิ่มอาร์เรย์ด้วย
tr.appendChild(arrtd[i]);
-
tab.appendChild(tr);
ใหม่เรียงลำดับ();
-
//ลบการดำเนินการ
ฟังก์ชั่น DeleteRow(){
var parentTr = new Array();//ขั้นแรกให้ใส่แถวที่เลือกไว้ในอาร์เรย์
กล่อง var = document.getElementsByName('selectbox');
แท็บ var = document.getElementById('tab');
สำหรับ (var i = 0;i<box.length;i++){
ถ้า(กล่อง[i].ตรวจสอบ==จริง){
var parent = กล่อง [i] .parentNode;
parentTr[i] = parent.parentNode;//หากสิ่งนี้ถูกวางไว้ข้างในโดยตรง เหตุใดจึงไม่สามารถลบออกทั้งหมดได้ - เป็นเพราะไม่มีการตอบรับเพียงพอหรือเปล่า?
//tab.removeChild(parentTr);
-
-
for(var i = 0;i<parentTr.length;i++){/ //การดำเนินการนี้จะลบรายการที่เลือกทั้งหมด
if(parentTr[i]){ //ในที่นี้เราต้องพิจารณาว่าเป็นค่าว่างหรือไม่ หากไม่เป็นค่าว่าง ให้ลบออก มิฉะนั้นจะรายงานข้อผิดพลาด
tab.removeChild(parentTr[i]);
-
-
ใหม่เรียงลำดับ();
-
//หากดำเนินการลบ ให้จัดเรียงใหม่
ฟังก์ชัน newSort(){
ข้อความ var = อาร์เรย์ใหม่ ();
var child_td = อาร์เรย์ใหม่ ();
var arr_tr = document.getElementsByTagName('tr');
สำหรับ(var i = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//รับโหนดทั้งหมดในคอลัมน์ที่สองโดยเริ่มจากแถวที่สอง
ถ้า(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
-
ข้อความ [i] = document.createTextNode (i);
child_td[i].appendChild(ข้อความ[i]);
-
-
//เลือกการดำเนินการทั้งหมด
ฟังก์ชั่น allSelect(){
กล่อง var = document.getElementsByName('selectbox');
สำหรับ (var i= 0;i<box.length;i++){
กล่อง [i] .checked = จริง;
-
-
//ยกเลิกการเลือกทั้งหมด
ฟังก์ชั่น cancelSelect(){
กล่อง var = document.getElementsByName('selectbox');
สำหรับ (var i = 0;i<box.length;i++){
ถ้า (กล่อง [i]. ตรวจสอบแล้ว == จริง) {
กล่อง [i] .checked = false;
-
-
-
//ฟังก์ชั่นการลงทะเบียนเหตุการณ์
ฟังก์ชั่น catchEvent (eventobj, เหตุการณ์, eventHandler) {
ถ้า (eventobj.addEventListener){
eventobj.addEventListener (เหตุการณ์ eventHandler เท็จ);
} อื่นถ้า (eventobj.attachEvent){
เหตุการณ์ = 'ใน'+เหตุการณ์;
eventobj.attachEvent (เหตุการณ์ eventHandler);
-
-
//catchEvent(เพิ่ม,'คลิก',addRow);
</สคริปต์>
</หัว>
<ร่างกาย>
<h3>ตารางไดนามิก</h3>
<input type="button" value="Add" id="add" onclick="addRow()" />
<input type="button" value="Select all" onclick="allSelect()" />
<input type="button" value="ยกเลิกทั้งหมด" onclick="cancelSelect()" />
<input type="button" value="Delete" id="delete" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellspacing="0px">
<tr><td></td><td>หมายเลขซีเรียล</td><td>คำถามที่หนึ่ง</td><td>คำถามที่สอง</td><td>คำถามที่สาม</td></tr>
</ตาราง>
</ร่างกาย>
</html></span>