Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > พี่ครับ ถ้า ผมจะทำ JavaScript Add/Remove Element ที่อยู่ในtable แบ่งให้1ชุดแสดง 3คอลลั้ม ทำไงหรอครับ



 

พี่ครับ ถ้า ผมจะทำ JavaScript Add/Remove Element ที่อยู่ในtable แบ่งให้1ชุดแสดง 3คอลลั้ม ทำไงหรอครับ

 



Topic : 121104



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



สถานะออฟไลน์




นี้ครับ code
Code (PHP)
  <script language="javascript">
    function CreateNewRow()
    {
        var intLine = parseInt(document.frmMain.hdnMaxLine.value);
        intLine++;
            
        var theTable = document.all.tbExp
        var newRow = theTable.insertRow(theTable.rows.length)
        newRow.id = newRow.uniqueID
        
        var item1 = 1
        var newCell
        
        //*** Column 1 ***//
        newCell = newRow.insertCell(0)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column1_"+intLine+"\" VALUE=\"\"></center>"

        //*** Column 2 ***//
        newCell = newRow.insertCell(1)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column2_"+intLine+"\" VALUE=\"\"></center>"     
        
        //*** Column 3 ***//
        newCell = newRow.insertCell(2)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column3_"+intLine+"\" VALUE=\"\"></center>"             
        
        //*** Column 4 ***//
        newCell = newRow.insertCell(3)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column4_"+intLine+"\" VALUE=\"\"></center>"     
        
        //*** Column 5 ***//
        newCell = newRow.insertCell(4)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column5_"+intLine+"\" VALUE=\"\"></center>"     
        //*** Column 6 ***//
        newCell = newRow.insertCell(5)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column6_"+intLine+"\" VALUE=\"\"></center>"      
        
        document.frmMain.hdnMaxLine.value = intLine;
    }
    
    function RemoveRow()
    {
        intLine = parseInt(document.frmMain.hdnMaxLine.value);
        if(parseInt(intLine) > 0)
        {
                theTable = (document.all) ? document.all.tbExp : 
                document.getElementById("tbExp")
                theTableBody = theTable.tBodies[0];
                theTableBody.deleteRow(intLine);
                intLine--;
                document.frmMain.hdnMaxLine.value = intLine;
        }   
    }   
</script>
<form name="frmMain" method="post">
                                   <table class="table" id="tbExp">
                                        <thead>
                                            <tr> 
                                            <body OnLoad="CreateNewRow();">
                                                <th><div align="center"></div>Column 1</th>
                                                <th><div align="center"></div>Column 2</th>
                                                <th><div align="center"></div>Column 3</th>
                                                <th><div align="center"></div>Column 4</th>
                                                <th><div align="center"></div>Column 5</th>
                                                <th><div align="center"></div>Column 6</th>
                                            </tr>
                                        </thead>
                                    </table>
                                        <input type="hidden" name="hdnMaxLine" value="0">
                                        <input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
                                        <input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
                                        </form>




Tag : PHP






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-01-28 15:35:13 By : erlnw001 View : 762 Reply : 5
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ใน ตัวอย่างมันก็แบ่งเป็น Column แต่ล่ะชุดให้อยู่แล้วนะครับ





แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-01-28 16:59:40 By : mr.win
 


 

No. 2



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



สถานะออฟไลน์


แบบ ข้างบน 3 ข้างล่าง 3ก้แบ่ง <tr> เลยใช่ไหมครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-01-28 19:43:06 By : erlnw001
 

 

No. 3



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ใช่ครับ Apply จากตัวอย่างก็ได้แล้ว
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-01-29 09:09:27 By : mr.win
 


 

No. 4



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



สถานะออฟไลน์


ผมแบ่งตามที่พี่บอกแล้วอ่ะครับทำไมมันเป็นแบบนี้อ่า ครับ
ๅ-ภถ
นี้ code ครับ
Code (PHP)
  <script language="javascript">
    function CreateNewRow()
    {
        var intLine = parseInt(document.frmMain.hdnMaxLine.value);
        intLine++;
            
        var theTable = document.all.tbExp
        var newRow = theTable.insertRow(theTable.rows.length)
        newRow.id = newRow.uniqueID
        
        var item1 = 1
        var newCell
        
        //*** Column 1 ***//
        newCell = newRow.insertCell(0)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column1_"+intLine+"\" VALUE=\"\"></center>"

        //*** Column 2 ***//
        newCell = newRow.insertCell(1)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column2_"+intLine+"\" VALUE=\"\"></center>"     
        
        //*** Column 3 ***//
        newCell = newRow.insertCell(2)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column3_"+intLine+"\" VALUE=\"\"></center>"             
        
        //*** Column 4 ***//
        newCell = newRow.insertCell(3)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column4_"+intLine+"\" VALUE=\"\"></center>"     
        
        //*** Column 5 ***//
        newCell = newRow.insertCell(4)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column5_"+intLine+"\" VALUE=\"\"></center>"     
        //*** Column 6 ***//
        newCell = newRow.insertCell(5)
        newCell.id = newCell.uniqueID
        newCell.setAttribute("className", "css-name");
        newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" NAME=\"Column6_"+intLine+"\" VALUE=\"\"></center>"      
        
        document.frmMain.hdnMaxLine.value = intLine;
    }
    
    function RemoveRow()
    {
        intLine = parseInt(document.frmMain.hdnMaxLine.value);
        if(parseInt(intLine) > 0)
        {
                theTable = (document.all) ? document.all.tbExp : 
                document.getElementById("tbExp")
                theTableBody = theTable.tBodies[0];
                theTableBody.deleteRow(intLine);
                intLine--;
                document.frmMain.hdnMaxLine.value = intLine;
        }   
    }   
</script>
<form name="frmMain" method="post">
                                   <table class="table" id="tbExp">
                                        <thead>
                                        <body OnLoad="CreateNewRow();">
                                            <tr> 
                                                <th><div align="center"></div>Column 1</th>
                                                <th><div align="center"></div>Column 2</th>
                                                <th><div align="center"></div>Column 3</th>
                                            </tr>
                                            <tr>
                                                <th><div align="center"></div>Column 4</th>
                                                <th><div align="center"></div>Column 5</th>
                                                <th><div align="center"></div>Column 6</th>
                                            </tr>
                                        </thead>
                                    </table>
                                        <input type="hidden" name="hdnMaxLine" value="0">
                                        <input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
                                        <input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
                                        </form>

เอ้อพี่ครับ ทำไมมัน ลบไม่ได้อ่ะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-01-29 14:04:47 By : erlnw001
 


 

No. 5



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



สถานะออฟไลน์


พี่ครับช่วยตอบหน่อยน่ะครับ ขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-01-30 07:49:47 By : erlnw001
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : พี่ครับ ถ้า ผมจะทำ JavaScript Add/Remove Element ที่อยู่ในtable แบ่งให้1ชุดแสดง 3คอลลั้ม ทำไงหรอครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่