Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ติดปัญหาการแทรกซ้อนตาราง body table เวลากด Add Table Rows Dynamically ก็ติดปัญหาซ้อน tr กัน พอมีวิธีแก้ไขไหมค่ะ

ติดปัญหาการแทรกซ้อนตาราง body table เวลากด Add Table Rows Dynamically ก็ติดปัญหาซ้อน tr กัน พอมีวิธีแก้ไขไหมค่ะ

เริ่มหัวข้อใหม่

NUT

โพสกระทู้ ( 56 )
บทความ ( 0 )

ติดปัญหาการแทรกซ้อนตาราง body table เวลากด Add Table Rows Dynamically ค่ะ

- จะเพิ่มตารางใหม่ต่อด้านล่าง ก็ติดปัญหาตารางซ้อน tr กัน พอมีวิธีแก้ไขไหม

รูปภาพตัวอย่าง ปัญหาตารางแทรกซ้อน
ewfrgghthjtr

อ้างอิง : https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-append-and-remove-table-row-dynamically

Code (PHP)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style>
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(markup);
        });
        
        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email Address">
    	<input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Peter Parker</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
    
</br>
<!-- เพิ่มตารางด้านล่าง -->
<table class="001" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
<!-- เพิ่มตารางด้านล่าง -->
</body> 
</html>

Tag : PHP, HTML, CSS, HTML5, Ajax, jQuery

Date : 2020-02-07 09:44:11

By : kittipongw

View : 888

Reply : 3

No. 1

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

อธิบายใหม่

Date : 2020-02-07 10:28:51

By : Genesis™

No. 2

NUT

โพสกระทู้ ( 56 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : Genesis™ เมื่อวันที่ 2020-02-07 10:28:51

รายละเอียดของการตอบ ::

ถึงคุณ Genesis™

คือ ตารางจะซ้อนกัน หลังจากกรอกข้อมูลแล้วกด Add row เพราะ มันคนละตารางกันค่ะ

Genesis™

Date : 2020-02-07 11:22:33

By : kittipongw

No. 3

NUT

โพสกระทู้ ( 56 )
บทความ ( 0 )

แก้ไขได้แล้ว ขอบคุณค่ะ

Date : 2020-02-07 11:33:31

By : kittipongw

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ติดปัญหาการแทรกซ้อนตาราง body table เวลากด Add Table Rows Dynamically ก็ติดปัญหาซ้อน tr กัน พอมีวิธีแก้ไขไหมค่ะ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก