จะสลับแถวของตาราง จะทำยังไง

วิธีการ

//สลับด้วย index ของ แถว

function exchange(i, j, tableID)
{
	var table = document.getElementByID('tableID');
	var trs = oTable.tBodies[0].getElementsByTagName("tr");

	if(i == j+1) {
		oTable.tBodies[0].insertBefore(trs[i], trs[j]);
	} else if(j == i+1) {
		oTable.tBodies[0].insertBefore(trs[j], trs[i]);
	} else {
		var tmpNode = oTable.tBodies[0].replaceChild(trs[i], trs[j]);
		if(typeof(trs[i]) != "undefined") {
			oTable.tBodies[0].insertBefore(tmpNode, trs[i]);
		} else {
			oTable.appendChild(tmpNode);
		}
	}
}

//สลับด้วย Object ของ Row (tr)
function exchange(oRowI, oRowJ, oTable)
{
	if(oRowI.rowIndex == oRowJ.rowIndex+1) {
		oTable.insertBefore(oRowI, oRowJ);
	} else if(oRowJ.rowIndex == oRowI.rowIndex+1) {
		oTable.insertBefore(oRowJ, oRowI);
	} else {
		var tmpNode = oTable.replaceChild(oRowI, oRowJ);
		if(typeof(oRowI) != "undefined") {
			oTable.insertBefore(tmpNode, oRowI);
		} else {
			oTable.appendChild(tmpNode);
		}
	}
}

source: http://terrill.ca/sorting/switching_table_rows.php

style = “border:0px;overflow:hidden;”

IE

border=0 scrolling=”no” frameborder=”0″

สรุปแล้วรวมได้ดังนี้

<iframe src=”" border=0 scrolling=”no” frameborder=”0″ style = “border:0px;overflow:hidden;”></iframe>

Link

4.1 < A >

• จุดเชื่อมโยง (hyperlink) จากหน้าหนึ่งไปยังอีกหน้าหนึ่ง หรือจากจุดหนึ่งไปยังอีกจุดหนึ่งในหน้าเดียวกัน หรือไปยังเว็บไซต์อื่นๆ

• attribute
  • href จะไปไหน
  • target ส่วนที่จะแสดงผล มี value เป็น
    • _top – หน้าbrowser ปัจจุบัน
    • _self – เฟรมตัวเอง
    • _parent – เฟรมข้างนอก
    • _blank – หน้าใหม่

4.2 < BASE >

• กำหนด baseurl ใน HTML โดยลิ้ง url ( href/src ) จะอ้างอิงจาก URI ในแทกนี้
• อยู่ในส่วน HEAD
• attribute
  • href – ลิ้ง URI จะมาเป็น base

Form

5.1 < FORM >

• กำหนดบริเวณรับข้อมูลจากอินพุทภายใน
• Attribute
  • action
  • target
  • method

5.2 < INPUT >

• ส่วนรับข้อมูลที่มีรูปแบบเป็นลักษณะต่างได้แก่ text , password, checkbox, radio, submit, reset, hidden, image, file, button

• attribute
  • type
  • value

5.3 < TEXTAREA >

• ส่วนรับข้อมูลที่เป็นกล่องข้อความหลายบรรทัด

5.4 < SELECT >

• ส่วนรับข้อมูลที่เป็นกล่องเลือกชุดข้อมูล
• Element
  • option
  • optgroup
• Attribute
  • multiple
  • size

5.5 < BUTTON >

• ส่วนรับข้อมูลที่เป็นปุ่มกด
• Attribute
  • type – submit (default), button, reset
  • value

5.6 < LABEL >

• คำบรรยายสำหรับ  input, textarea, select
• Attribute
  • for – เชื่อมกับ id ของelement เป้าหมาย

Definition List

6.1 < DL >

• ประกาศการใช้รูปแบบลิสต์ แบบแบ่งหัวข้อ

6.2 < DT >

• ใช้ใน DL
• หัวข้อ
• จะอยู่ชิดซ้าย

6.3 < DD >

• ใช้ใน DL
• คำอธิบาย
• ย่อหน้า

เนื้อหาจะแบ่งเป็น

1. โครงสร้าง
2. การแสดงผล
3. ลิสต์
4. การเชื่อมต่อ
5. ฟอร์ม
6. ลิสต์แบบให้ความหมาย

Structure

1.1 < HTML >

• ส่วนที่บอกว่านี่เป็นข้อมูล HTML
• Element
  • < HEAD >
  • < BODY >

1.2. < HEAD >

• เป็นส่วนแสดงให้ browser รู้ว่าส่วนที่อยู่ในแ tag นี้ เป็น header ของข้อมูล HTML ไม่ต้องเอาไปแสดงผล

1.3. < BODY >

• ส่วนที่เกือบจะตรงข้ามกับ 1.2 เป็นส่วนแสดงผล

1.4 < TABLE >

• ตาราง
• Element
  • thead
  • tfoot
  • tbody
  • tr
  • td
  • th

1.5 < DIV >

• จัดกลุ่มข้อความในรูปแบบบล็อค

1.6 < SPAN >

• จัดกลุ่มข้อความให้ในรูปแบบ in-line

Display

2.1 < P >

• ย่อหน้า
• ไม่มีการแสดงผลอะไรเพิ่มเติม

2.2 < h1 > , < h2 > , < h3 > , < h4 > , < h5 > , < h6 >

• หัวข้อ
• ขนาดของตัวอักษร และความหนา ขึ้นบรรทัดใหม่

2.3 < B > , < STRONG >

• ตัวหนา

2.4 < EM > , < I > , < CITE > , < DFN >

• ตัวเอียง
• cite ใช้ในการอ้างอิง
• DFM ใช้ขยายความ มี attribute => title

2.5 < ACRONYM >

• ขยายคำย่อ
• attribute
  • title

2.6 < BLOCKQUOTE >

• อ้างอิง แบบ Block
• quote แบบในเวปบอร์ด
• attribute
  • cite – URL อ้างอิง

2.7 < Q >

• อ้างอิงแบบ in-line
• ใส่เครื่องหมายคำพูดให้ ( ” )

2.8 < INS >

• บอกว่าเพิ่มนะ
• ขีดเส้นใต้
• attribute
  • cite – URL อ้างอิงว่าทำไมเพิ่ม ??
  • datetime – วันที่เพิ่ม

2.9 < DEL >

• บอกว่าลบนะ
• ขีดฆ่า
• attribute
  • cite – URL อ้างอิงว่าทำไมลบ ??
  • datetime – วันที่ลบ

2.10 < PRE >

• แสดงรูปแบบดั้งเดิม คือ ทั้ง ช่องว่างและการขึ้นบรรทัดใหม่ เจอเอามาแสดงผลด้วย

2.11 < BR >

• ขึ้นบรรทัดใหม่

2.12 < IMG >

• ส่วนแสดงรูปภาพ
• attribute
  • src – แหล่งที่อยู่ของรูป (source)

List

3.1 < UL > , < OL >

• ประกาศการใช้รูปแบบลิสต์
• UL – จะใช้สัญลักษณ์ในการนำหน้ารายการ
• OL – จะใช้ลำดับในการนำหน้ารายการ
• OL attribute
  • type = 1, A, a, i, I
  • start – ลำดับที่เริ่มต้น

3.2 < LI >

• ส่วนประกาศรายการ
• อยู่ภายใน UL, OL

หัวข้อที่ผมเอาไปพูดก็คือ Web design Tips & Technique 1.5
(ที่ต้องเป็น1.5 เพราะว่าทำ2ไม่ทัน ในslideเป็นของครั้งแรกที่พูดใน barcampbkk2 ซะครึ่งนึง)

ทีนี้ในslideก็จะมีหัวข้อนึงน่ะครับ ที่เกี่ยวกับเครื่องมือในการทำงานกับhtmlและcss
ซึ่งเดี๋ยวผมจะพูดต่อไปนี่แหละครับ ว่ามันมีเครื่องมืออะไรที่น่าใช้บ้าง
(ตกลงที่แพล่มไปตั้งนานนี่ไม่ได้เกี่ยวเลยใช่ไหม…. -_-”)

ก่อนอื่นเลยครับ ผมขอแบ่งเครื่องมือออกเป็น3ประเภทหลักๆคือ

1. เครื่องมือสำหรับการสร้าง html และ css (Creation)
2. เครื่องมือสำหรับการตรวจสอบการรับรองการทำงาานบนBrowserต่างๆ (Check Compatibility)
3. เครื่องมือสำหรับการแก้บั๊ก (Debug)

1. Creation

ผมใช้เพียงตัวเดียวเท่านั้นเลยครับ ก็คืิอ EDITPLUS เท่านั้นเอง
หลายๆคนอาจจะถนัดกับ dreamweaver ครับ แต่ผมไม่ค่อยชอบเท่าไร
บางทีมันชอบใส่อะไรประหลาดๆเข้าไปในโค้ดให้เอง เช่น &nbsp; ซึ่งมันจะทำให้ได้ผลลัพธ์ไม่ได้ดั่งใจเท่าไร

2. Check Compatibility

ที่ผมเห็น มันก็มีหลายๆโปรแกรมนะครับ ที่ช่วยตรวจสอบพวกนี้ได้ แต่สุดท้ายแล้ว
มันก็มักจะมีบางจุดที่เกิดบั๊กอยู่ดี ผมจึงคิดว่าที่ดีที่สุดก็คือลองเปิดด้วยตัวมันเองเลยจะดีที่สุดครับ

browser ที่ผมตรวจสอบนั้น ปกติแล้วก็จะมี Firefox , ie7 ,ie6 ครับ
(แต่สำหรับในเว็บนี้ ขอออกตัวไว้ก่อนเลยครับไม่ได้รับรองie6)

แต่ก็มีคำถามตามๆมาครับ ว่าแล้วจะเช็ค ie6 ยังไง ในเมื่อwindowเราลง ie7 ไปแล้ว
มันก็มีหลายๆวิธีน่ะนะครับ ทั้ง ietester , ie6 portable

แต่ผมก็ยังเจอจุดผิดพลาดทั้งสองตัวอยู่ ตัวที่ผมใช้ในปัจจุบันและ happy กับมันที่สุดคือตัวนี้ครับ

XENOCODE สำหรับตัวนี้ไม่จำเป็นต้องลงโปรแกรมไว้ในเครื่องด้วยครับ
เพราะมันสามารถรันbrowserที่ท่านต้องการผ่านหน้าเว็บได้เลย
ซึ่งนอกจาก ie6 แล้ว xenocode ยังสามารถรันbrowserอื่นๆได้อีกด้วย (ลองไปเล่นกันดูเองละกันครับ)

3.Debug

จะมีใ้ช้ด้วยกัน2ตัวครับคือ firebug ซึ่งเป็น add-on อยู่บน firefox (คิดว่าหลายๆท่านน่าจะรู้จักกัน)

และ IE developer toolbar สำหรับ บน ie ครับ