เกี่ยวกับ การสร้าง Table ครับ
ผมได้เขียน รับค่าจาก 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[i] = inputs[i].value;
}
/*document.write(qs[1]+qs[0]);*/
var tr= document.createElement("tr")
tr.height="40";
for ( i = 0 ; i < inputs.length ; i++ )
{
col[i] = document.createElement("td");
}
for ( i = 0 ; i < inputs.length ; i++ )
{ var a =document.createTextNode(qs[i])
col[i] = appendChild(a);
}
for ( i = 0 ; i < inputs.length ; i++ )
{
tr.appendChild(col[i]);
}
var tb = document.getElementById("table1");
tb.tBodies(0).appendChild(tr);
}
</script>
ตรง สีแดงที่มัน แจ้ง Eror อ่ะครับ งงมาก ช่วยหน่อยนะครับขอบคุณครับ
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[i] = inputs[i].value;
}
/*document.write(qs[1]+qs[0]);*/
var tr= document.createElement("tr")
tr.height="40";
for ( i = 0 ; i < inputs.length ; i++ )
{
col[i] = document.createElement("td");
}
for ( i = 0 ; i < inputs.length ; i++ )
{ var a =document.createTextNode(qs[i])
col[i] = appendChild(a);
}
for ( i = 0 ; i < inputs.length ; i++ )
{
tr.appendChild(col[i]);
}
var tb = document.getElementById("table1");
tb.tBodies(0).appendChild(tr);
}
</script>
ตรง สีแดงที่มัน แจ้ง Eror อ่ะครับ งงมาก ช่วยหน่อยนะครับขอบคุณครับ
<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>
ลองใช้ FF เช็ค error เอาน๊าาา
แต่ผมงงกะ Javascript มากๆเลยครับ มันน่าจ่ามีแค่ loop เดียวนี่ครับ ไม่น่าจะมีหลาย loop ขนาดนั้น
for ( i = 0 ; i < inputs.length ; i++ ) {
var val = inputs[i].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 ไม่จะเป็นต้องมี ; ปิดครับ ถ้าขึ้นบรรทัดใหม่ (ถึงแม้ว่าควรจะมี)
<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 หรือเปล่าครับผมกก็ไม่แน่ใจ ครับ
<form id="Group_1" name="form1" method="post" action="">
มีรึเปล่า tbody ผมไม่เห็นเห็น
แล้วโค้ดนี้ใช้ทำอะไร หรอครับ อาจาร์ย แต่เอาโค้ดไปทดสอบมันออกได้ไง งง เลย ^^
tb.tBodies(0).appendChild(tr);