A-AA+then

เกี่ยวกับ การสร้าง Table ครับ

1,733
ผมได้เขียน รับค่าจาก Form แล้วทำการสร้าง Table โดยใช้ javascript  เป็นตัวทำงาน โดยอาศัยหนังสือ และ บทความของอาจาร์ย แต่มัน ไม่ออกอ่ะครับดูให้หน่อยนะครับ

function cre_Preview()
{
    /*alert(Group_1.elements['Group1_data[0]'].value);*/
     var inputs = Group_1.getElementsByTagName( 'input' );
   
     var qs = Array();
     var col = Array();
     
     for ( i = 0 ; i < inputs.length ; i++ )
    {
            qs = inputs.value;
    }
     /*document.write(qs[1]+qs[0]);*/
     var tr= document.createElement("tr")
     tr.height="40";
      for ( i = 0 ; i < inputs.length ; i++ )
    {
            col = document.createElement("td");
    }
    for ( i = 0 ; i < inputs.length ; i++ )
    {         var a =document.createTextNode(qs)
            col = appendChild(a);

    }
    for ( i = 0 ; i < inputs.length ; i++ )
    {
            tr.appendChild(col);
    }
    var tb = document.getElementById("table1");
    tb.tBodies(0).appendChild(tr);
   
}
</script>

ตรง สีแดงที่มัน แจ้ง Eror อ่ะครับ งงมาก ช่วยหน่อยนะครับขอบคุณครับ

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

อันนี้ คือส่วน Html ครับ
<body>

<table width="200" border="1">
  <form id="Group_1" name="form1" method="post" action="">
  <tr>
    <td width="77">inputData1</td>
    <td width="107"><input type="text" name="Group1_data[0]" /></td>
  </tr>
  <tr>
    <td>inputData2</td>
    <td><input type="text" name="Group1_data[1]" />      </td>
  </tr>
  </form>
</table>
<br />
<div><input type="submit" name="Submit" onclick="cre_Preview()" /></div>
<div id="Dis_preview">
<table id="table1" >
</table>
</div>
<div></div>
</body>
1

 var a =document.createTextNode(qs) <=== ยังไม่ได้ปิด : อ่ะ

ลองใช้ FF เช็ค error เอาน๊าาา
2

table ต้องมี tbody ด้วยครับ

แต่ผมงงกะ Javascript มากๆเลยครับ มันน่าจ่ามีแค่ loop เดียวนี่ครับ ไม่น่าจะมีหลาย loop ขนาดนั้น

for ( i = 0 ; i < inputs.length ; i++ ) {
  var val = inputs.value;// อ่านค่า
  var td = document.createElement("td"); // สร้าง td
  var a = document.createTextNode(val ); // สร้าง text
  td.appendchild( a ); // ใส่ text ลงบน td
  tr.appendChild( td ); // ใส่ td ลงบน tr
}


ลองพิจารณาคำสั่งเป็นขั้นเป็นตอนดูครับ

ส่วนคำตอบของ bAnk Javascript ไม่จะเป็นต้องมี ; ปิดครับ ถ้าขึ้นบรรทัดใหม่ (ถึงแม้ว่าควรจะมี)
3

ขอบคุณ อาจาร์ย และ คุณแบงค์มากๆๆครับ เดี้ยวขอลองเเก้ดูก่อนนะครับ ^^
4

<html>
<head>
<script>
function createRow(txt1, txt2) {
    var tr = document.createElement("tr");
    tr.height = "40";

    var col1 = document.createElement("td");
    var col2 = document.createElement("td");

    col1.setAttribute("bgColor", "#cccccc");
    col2.bgColor = "#eeeeee";
    col2.vAlign = "bottom";

    col1.appendChild(document.createTextNode(txt1));
    col2.appendChild(document.createTextNode(txt2));

    tr.appendChild(col1);
    tr.appendChild(col2);

    var tb = document.getElementById("table1");
    tb.tBodies(0).appendChild(tr);
}
</script>

<body>
<table id="table1" border="1" align="center">
<tr><th>column 1</td><th>column 2</td></tr>
</table>
<script>
    createRow("123", "456");
    createRow("abc", "def");
</script>

</body>
</html>
นี่ คือ Code ตัวอย่าง ที่ได้มาจากหนังสือ แล้วผมลองเอามาประยุกต์ อ่ะครับ แล้วตรงที่เป็น สีแดง นั้นเป็น ส่วนของ tbody หรือเปล่าครับผมกก็ไม่แน่ใจ ครับ
5

<table width="200" border="1">
  <form id="Group_1" name="form1" method="post" action="">

มีรึเปล่า tbody ผมไม่เห็นเห็น
6

ผมก็งง เหมือนกันครับ แต่เอามาจาก หนังสือ อ่ะครับ แต่พอเขียนตาม หนัวสือ มันก็ออกได้ไงไม่รู้
แล้วโค้ดนี้ใช้ทำอะไร หรอครับ อาจาร์ย แต่เอาโค้ดไปทดสอบมันออกได้ไง งง เลย ^^
tb.tBodies(0).appendChild(tr);
7
^