A-AA+then

ผมได้ลองประมวลจากหลายคำถามจากบอร์ดมานะครับ

1,877
ผมได้ลองประมวลจาก 2-3 คำถามออกมาเป็น code ดังข้างล่างนะครับ
เมื่อ click แต่ละ checkbox แล้วให้ show ผลรวมที่ช่อง text พร้อมสร้างตารางบรรจุ tag select ที่ไว้ภายใน โดยกำหนด id ให้แต่ละ tag ไว้ด้วย
เมื่อ uncheck ก็ลบค่าออกจากผลรวม ซึ่งมันก็เป็นไปได้ด้วยดีเพราะอาจารย์ทำเอาไว้แล้ว 555

แต่ผมต้องการให้เอา tag select ออกไปด้วยเมื่อ uncheck
จาก guide ที่อาจารย์เคยให้มาให้ใช้ removeChild เพื่อลบ element นั้นออก
ก็เลยได้ code การลบตารางและ tag select ดังใน code ส่วน uncheck ซึ่งแน่นอว่า ใช้ไม่ได้
รบกวนอาจารย์และสมาชิกบอร์ดด้วยนะครับ

<script type="text/javascript">
function tick( frm , chk )
// function
  // คำนวณบวกหรือลบจากค่าเริ่มต้น
  var sum = parseFloat( frm.sum.value ); 
  frm.sum.value = chk.checked ? sum + parseFloat( chk.value ) : sum - parseFloat( chk.value );

if (chk.checked) { //ถ้าเลือก
  var row = document.createElement("tr");
  row.setAttribute("id", "tr"+chk.value);
  var cell = document.createElement("td");
  cell.setAttribute("id", "td"+chk.value);
  var InputSelect = document.createElement("select");
  InputSelect.setAttribute("id", "select"+chk.value);
  InputSelect.setAttribute("name", "myselect");
  cell.appendChild(InputSelect);
  var cellText = document.createTextNode(chk.value);
  cell.appendChild(cellText);
  row.appendChild(cell);
  var tblBody = document.getElementById("tblBody");
  tblBody.appendChild(row);
}//ถ้าเลือก
else
 {// ถ้าไม่เลือก
  var row = document.createElement("tr");
  row.setAttribute("id", "tr"+chk.value);
  var cell = document.createElement("td");
  cell.setAttribute("id", "td"+chk.value);
  var InputSelect = document.createElement("select");
  InputSelect.setAttribute("id", "select"+chk.value);
  InputSelect.setAttribute("name", "myselect");
  cell.removeChild(InputSelect);
  var cellText = document.createTextNode(chk.value);
  cell.removeChild(cellText);
  row.removeChild(cell);
  var tblBody = document.getElementById("tblBody");
  tblBody.removeChild(row);

}// ถ้าไม่เลือก
} //end function
</script>
<table style="border: solid 1px; border-color:#FF3300; background-color:lightpink"><tbody id="tblBody"></tbody></table>
<hr width="30" style="border:dotted 1px; color:red;">

<form name="frm">
<input type="checkbox" value="1" onclick="tick(frm , this)" /> 1<br> 
<input type="checkbox" value="2" onclick="tick(frm , this)" /> 2<br> 
<input type="checkbox" value="3" onclick="tick(frm , this)" /> 3<br> 
<input type="checkbox" value="4" onclick="tick(frm , this)" /> 4<br> 
<input type="checkbox" value="5" onclick="tick(frm , this)" /> 5<br> 
<input type="checkbox" value="6" onclick="tick(frm , this)" /> 6<br> 
<input type="checkbox" value="7" onclick="tick(frm , this)" /> 7<br> 
<input type="checkbox" value="8" onclick="tick(frm , this)" /> 8<br> 
<input type="checkbox" value="9" onclick="tick(frm , this)" /> 9<br> 
<input type="checkbox" value="10" onclick="tick(frm , this)" /> 10<br> 
<input type="text" name="sum" value="0" />
</form>




2 ความคิดเห็น

removeChild ใช้กับ element ครับ และใช้อ้างอิงกับ node เดิมเท่านั้น ไม่ต้องสร้างใหม่ครับ ในกรณีข้างต้น การเอา node ออก ก็ใช้โค้ดแค่

var tblBody = document.getElementById("tblBody");
tblBody.removeChild(document.getElementById( "tr" + chk.value  ));

อย่าลืมแก้ไขผลลัพท์ก่อนเอา node ออกด้วยครับ

 

1

ไม่ขอบคุณไม่ได้แล้วครับอาจารย์ ขอบคุณครับ
2
^