A-AA+then

สอบถามเรื่อง Java Element Dinamic หน่อยพอดีทำแล้วลบแถวไม่ได้นะคร

1,778
สอบถามเรื่อง Java Element Dinamic หน่อยพอดีทำแล้วลบแถวไม่ได้นะคร
สอบถามเรื่อง Java Element Dinamic หน่อยพอดีทำแล้วลบแถวไม่ได้นะครับ คืออยากลบแถวที่ 2 กับแถวที่ 4 ออกนะครับ

Code ครับอาจารย์

    <html>
    <head>
    <title>ThaiCreate.Com JavaScript Add/Remove Element</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <script language="javascript">
    function CreateNewRow()
    {
    var intLine = parseInt(document.frmMain.hdnMaxLine.value);
    intLine++;
     
    var theTable = document.all.tbExp
    //แทรกแถวที่ 1
    var newRow = theTable.insertRow(theTable.rows.length)
    newRow.id = newRow.uniqueID
    var newCell
     
    //*** Column 1 ***//
    newCell = newRow.insertCell(0)
    newCell.id = newCell.uniqueID
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML ='ลำดับที่ '+intLine+'<input name="btnDel" type="button" id="btnDel" value="ลบฟร์อมนนี้" onClick="RemoveRow();"><div align="center">รหัสนักศึกษา</div>'
     
    //*** Column 2 ***//
    newCell = newRow.insertCell(1)
    newCell.id = newCell.uniqueID
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = '<input type="text" name="textfield">'
     
    //แทรกแถวที่ 2
    var newRow = theTable.insertRow(theTable.rows.length)
    newRow.id = newRow.uniqueID
    var newCell
     
    //*** Column 1 ***//
    newCell = newRow.insertCell(0)
    newCell.id = newCell.uniqueID
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML ='<div align="center">ชื่อ - สกุล </div>'
     
    //*** Column 2 ***//
    newCell = newRow.insertCell(1)
    newCell.id = newCell.uniqueID
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = '<input type="text" name="textfield2">'
     
    //แทรกแถวที่ 3
    var newRow = theTable.insertRow(theTable.rows.length)
    newRow.id = newRow.uniqueID
    var newCell
     
    //*** Column 1 ***//
    newCell = newRow.insertCell(0)
    newCell.id = newCell.uniqueID
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML ='<div align="center">ที่อยู่</div>'
     
    //*** Column 2 ***//
    newCell = newRow.insertCell(1)
    newCell.id = newCell.uniqueID
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = '<textarea name="textarea"></textarea>'
    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>
    <body Onload="CreateNewRow();">
    <form name="frmMain" method="post">
    <table width="445" border="1" id="tbExp">
      <tr>
        <td colspan="2"><div align="center">เพิ่มข้อมูลนักศึกษา</div></td>
      </tr>
    </table>
    <input type="hidden" name="hdnMaxLine" value="0">
    <input name="btnAdd" type="button" id="btnAdd" value="เพิ่มฟร์อมกรอกข้อมูล" onClick="CreateNewRow();">
     
    </form>
    </body>
    </html>

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

ลบก็คือ removeChild() ครับ

อย่างแรกเลย ตารางต้องมี tbody ถีงจะสมบูรณ์
อย่างที่สอง กำหนด id ที่แตกต่างกันให้แถว
อย่างที่สาม กำหนดปุ่มลบ ให้ลบ แถวที่ id ที่กำหนด

<tbody id=tbody>
<tr id=del_0><input onclick=delete('del_0').....
<tr id=del_1>
><input onclick=delete('del_').....
</tbody>

    function delete(id)
    document.getElementById(tbody).removeChild(document.getEementById(id));
    }


ผมเขียนแบบง่ายๆให้ดู ลองประยุกต์ดูนะ

1

อาจารย์ครับช่วยดูให้อีกทีนะครับหรือแก้ไขให้หน่อยนะครับผมไม่ได้จริงๆ  ครับอาจารย์

    <html>
    <head>
    <title>ThaiCreate.Com JavaScript Add/Remove Element</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <script language="javascript">
    function CreateNewRow()
    {
    var intLine = parseInt(document.frmMain.hdnMaxLine.value);
    intLine++;
     
    var theTable = document.all.tbExp
    //แทรกแถวที่ 1
    var newRow = theTable.insertRow(theTable.rows.length)
    newRow.id = newRow.uniqueID
    var newCell
     
    //*** Column 1 ***//
    newCell = newRow.insertCell(0)
    newCell.id = newCell.uniqueID
    newCell.setAttribute("className", "css-name");
     
    newCell.innerHTML ='<tr id="DelTr'+intLine+'"><td><input name="btnDel" type="button" id="btnDel" value="ลบฟร์อมนนี้" onClick="RemoveRow('+intLine+');"> รหัสนักศึกษา </td><td>11</td></tr>'
     
     
     
     
    document.frmMain.hdnMaxLine.value = intLine;
    }
     
    function RemoveRow(id)
    {
    document.getElementById(tbExp).removeChild(document.getEementById(id));
     
    }
    </script>
    <body Onload="CreateNewRow();">
    <form name="frmMain" method="post">
    <table width="445" border="1">
      <tr>
        <td colspan="2"><div align="center">เพิ่มข้อมูลนักศึกษา</div></td>
      </tr>
      <tbody  id="tbExp"></tbody>
    </table>
    <input type="hidden" name="hdnMaxLine" value="0">
    <input name="btnAdd" type="button" id="btnAdd" value="เพิ่มฟร์อมกรอกข้อมูล" onClick="CreateNewRow();">
     
    </form>
    </body>
    </html>
2

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

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

3
^