รูปแบบตารางไม่เหมือกันเมื่อกดปุ่มเพิ่มข้อมูล javascript

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รูปแบบตารางไม่เหมือกันเมื่อกดปุ่มเพิ่มข้อมูล javascript

รูปแบบตารางไม่เหมือกันเมื่อกดปุ่มเพิ่มข้อมูล javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This is a test.</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<table width="100%"  border="1" align="center" >
   <tr>
    <td align="left" valign="top">
    <form method="post" action="">
    <div id="form">
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="1" bgcolor="#6699C"><font color="white">ร้านอาหาร</font></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="res" value="บาร์บีคิว"/>
            <span class="style1"><img src="images/category/ก๋วยเตี๋ยว.png" width="25" height="25">บาร์บีคิว</span></td>
        <td><input type="checkbox" name="res" value="ก๋วยเตี๋ยว"/>
            <span class="style1">ก๋วยเตี๋ยว</span></td>
        <td><input type="checkbox" name="res" value="สเต็ก"/>
            <span class="style1">สเต็ก</span></td>
        <td><input type="checkbox" name="res" value="จานด่วน"/>
            <span class="style1">จานด่วน</span></td>
        <td><input type="checkbox" name="res" value="พิซซ่า"/>
            <span class="style1">พิซซ่า</span></td>
        <td><input type="checkbox" name="res" value="เบเกอรี่"/>
            <span class="style1">เบเกอรี่</span></td>
        <td><input type="checkbox" name="res" value="ยำ&ตำ"/>
            <span class="style1">ยำ&amp;ตำ</span></td>
        <td><input type="checkbox" name="res" value="ติ่มซำ"/>
            <span class="style1">ติ่มซำ</span></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="res" value="สุกี้"/>
            <span class="style1">สุกี้</span></td>
        <td><input type="checkbox" name="res" value="บุฟเฟต์"/>
            <span class="style1">บุฟเฟต์</span></td>
        <td><input type="checkbox" name="res" value="ทะเล"/>
            <span class="style1">ทะเล</span></td>
        <td><input type="checkbox" name="res" value="อื่นๆ"/>
            <span class="style1">อื่นๆ</span></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>
    <div id="btnAdd">
       <input type="button" value="add information" />
       <tr>
       <td colspan="8">
        </td>
      </tr>
     </div>
    <table>
      <tr>
        <td><input type="submit"  value="ค้นหา" /></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>     
     </table>
    </form>
    </td>
  </tr>
  <tr>
    <td bgcolor="#CCC"><b><font size="2" color=blue>Copyright (c) 2010-2014 by Naruepon.p</font></b></td>
  </tr>
</table>

<script>

	$('#btnAdd').click(function() {
      	$('#form').append( "<table width='100%' border='1' cellspacing='0' cellpadding='0'>");
      	$('#form').append( "</tr>");
        $('#form').append( "<td colspan='1' bgcolor='#6699C'><font color='white'>ร้านอาหาร</font></td>");
      	$('#form').append( "</tr>");
      	$('#form').append( "<tr>");
        $('#form').append( "<td><input type='checkbox' name='res' value='บาร์บีคิว' /><span class='style1'><img src='images/category/ก๋วยเตี๋ยว.png' width='25' height='25'>บาร์บีคิว</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='ก๋วยเตี๋ยว' /><span class='style1'>ก๋วยเตี๋ยว</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='สเต็ก' /><span class='style1'>สเต็ก</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='จานด่วน' /><span class='style1'>จานด่วน</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='พิซซ่า' /><span class='style1'>พิซซ่า</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='เบเกอรี่' /><span class='style1'>เบเกอรี่</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='ยำ&ตำ' /><span class='style1'>ยำ&amp;ตำ</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='ติ่มซำ' /><span class='style1'>ติ่มซำ</span></td>");
      	$('#form').append( "</tr>");
      	$('#form').append( "<tr>");
        $('#form').append( "<td><input type='checkbox' name='res' value='สุกี้' /><span class='style1'>สุกี้</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='บุฟเฟต์' /><span class='style1'>บุฟเฟต์</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='ทะเล' /><span class='style1'>ทะเล</span></td>");
        $('#form').append( "<td><input type='checkbox' name='res' value='อื่นๆ' /><span class='style1'>อื่นๆ</span></td>");
        $('#form').append( "<td>&nbsp;</td>");
        $('#form').append( "<td>&nbsp;</td>");
        $('#form').append( "<td>&nbsp;</td>");
        $('#form').append( "<td>&nbsp;</td>");
      	$('#form').append( "</tr>");
      	$('#form').append( "<tr>");
        $('#form').append( "<td colspan='8'>");
        $('#form').append( "</td>");
      	$('#form').append( "</tr>");
    	$('#form').append( "</table>");


      });
</script>
</body>
</html>

Jame Panuwat Suksamran f('ip_que'))?> 18-11-2016 12:10:10

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองใช้วิธีการ clone เป้นแนวทาง

การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery

https://www.ninenik.com/content.php?arti_id=478 via @ninenik

ตรวจสอบการใช้แท็ก html ให้มีรูปแบบที่ถูกด้อง ตามโค้ดมาแการแทรก แท็กที่เปิด เช่น

  <div id="btnAdd">  
       <input type="button" value="add information" />  
       <tr>  
       <td colspan="8">  
        </td>  
      </tr>  
     </div>

อีกส่วนการ สร้าง element หรือแท็กซ้ำกัน ชื่อของ input ควรเป้น รูปแบบ array เช่น

<input type='checkbox' name='res[]'

ninenik f('ip_ans'))?> 18-11-2016

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน