Jump to content
Sign in to follow this  
atomic

Javascript - Html Dom

Recommended Posts

Salam untuk semua,saya ada soalan kepada yg sudi tolong.

 

saya dah cuba,tapi masih gagal..

 

<!DOCTYPE html>
<html>

<body>
    <table id="myTable" border="1">
        <tr>
            <td>
                <input type="checkbox" id="chkall" name="chkall">
            </td>
            <td>Bill</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk" name="chk">
            </td>
            <td>cell 1</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk" name="chk">
            </td>
            <td>cell 2</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk" name="chk">
            </td>
            <td>cell 3</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk" name="chk">
            </td>
            <td>cell 4</td>
        </tr>
    </table>
    <br>

    <button onclick="myFunction()">Try it</button>

    <script>
        function myFunction() {
            var objchk = document.getElementsByName("chk");

            for (var i = 1; i = objchk.length; i++) {

                //if (objchk[i].checked) {
                    //alert(objchk[i].checked);
               //}
                myTable.deleteRow(1);
            }
        }
    </script>

</body>

</html>

Berdasar contoh kat atas nih,semua row boleh delete bila click button,

tapi apa yang saya nak, dia akan delete BERDASAR checkbox yang dipilih.

dah buntu..harap ada sudi bantu.

Share this post


Link to post
Share on other sites

Tak boleh delete macam tu kalau by index. Delete dari hujung ke pangkal macam ni:

 

<script>
        function myFunction() {
            var objchk = document.getElementsByName("chk");
            var i = objchk.length - 1;
            do {
                 alert(i + "=" + objchk[i].checked);
                 if (objchk[i].checked) myTable.deleteRow(i + 1);
                 i--;
            } while ( i != 0 );
        }
</script>
Edited by syahmixp

Share this post


Link to post
Share on other sites
<script>
function myFunction()
{
var objchk=document.getElementsByName("chk");
  for(var i = 0;i < objchk.length;i++){	
  	if(objchk[i].checked){ //checked dah jalan
		myTable.deleteRow(i+1);	//satu persatu rekod jalan.		
	}
  }
}
</script>

Dah boleh delete dari bawah atau atas.

masalah sekarang, kalau tick semua CHECKBOX,tak boleh delete..

masalah berpunca pada LOOP nilai length CHECBOX.

 

Harap ada yg sudi tolong..

*2 hari dah,tak selesai2 juga. :(

Share this post


Link to post
Share on other sites

 

<script>
function myFunction()
{
var objchk=document.getElementsByName("chk");
  for(var i = 0;i < objchk.length;i++){	
  	if(objchk[i].checked){ //checked dah jalan
		myTable.deleteRow(i+1);	//satu persatu rekod jalan.		
	}
  }
}
</script>

Dah boleh delete dari bawah atau atas.

masalah sekarang, kalau tick semua CHECKBOX,tak boleh delete..

masalah berpunca pada LOOP nilai length CHECBOX.

 

Harap ada yg sudi tolong..

*2 hari dah,tak selesai2 juga. :(

 

 

Try tukor dari getElementsByName kepada getElementsByTagName

 

var objchk = document.getElementsByTagName('chk');
   
   for (var i=0; i < objchk.length; i++)
   {
    if (objchk[i].getAttribute('type') == "checkbox")
	{
	 if (objchk[i].checked==true)
	 { 
           // Do what you want
         }

        }
   }

Share this post


Link to post
Share on other sites

tq master Chuki2 coz reply,getElementsByTagName tak boleh juga bro..(mb tak pandai)

saya tukar sikit,akhirnya 2 hari baru selesai..arghhh penat tapi puas hati (bg budak baru belajar mcm saya).

 ini kod yg saya buat, andai ada pembetulan mohon tunjuk ajar dari sifu2.

 

<!DOCTYPE html>
<html>
<body>
<table id="myTable" border="1">
  <tr>
    <td colspan="2"><input type="checkbox" id="chkAll" name="chkAll" onClick="chkDelAll()">Bill</td>
    <td>Name</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="chkBox" name="chkBox"></td>
    <td>1</td>
    <td>cell 1</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="chkBox" name="chkBox"></td>
    <td>2</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="chkBox" name="chkBox"></td>
    <td>3</td>
    <td>cell 3</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="chkBox" name="chkBox"></td>
    <td>4</td>
    <td>cell 4</td>
  </tr>
</table>
<br> 

<button onClick="DeleteRows()">Hapus</button>
</body>
</html>
<script type="text/javascript">
    function chkDelAll() {
        var i;
        i = 0;
        if (document.getElementById("chkAll").checked) {
            ObjChk = document.getElementsByName("chkBox");
            for (i = 0; i < ObjChk.length; i++) {
                ObjChk[i].checked = true;
            }
        } else {
            ObjChk = document.getElementsByName("chkBox");
            for (i = 0; i < ObjChk.length; i++) {
                ObjChk[i].checked = false;
            }
        }
    }

    function DeleteRows() {
        var objchk = document.getElementsByName("chkBox");
        var blnDeleted = false;

        if (objchk.length === 0) {
            alert("Tiada rekod untuk dihapus.");
            return;
        }
        for (var i = objchk.length - 1; i > -1; i--) {
            if (objchk[i].checked) {
                myTable.deleteRow(i + 1);
                blnDeleted = true;
            }
        }
        objchk = null;
        if (blnDeleted === false) {
            alert("Sila pilih rekod untuk dihapus.");
            return;
        }
        for (dx = 1;
            (dx <= (myTable.rows.length - 1)); dx++) {
            myTable.rows[dx].cells[1].innerHTML = (dx);
        }
        document.getElementById("chkAll").checked = false;
		
		var table = document.getElementById("myTable");
		var row = table.insertRow(1);
		var cell1 = row.insertCell(0);
		cell1.colSpan = 3;
		cell1.innerHTML = "<center>Tiada rekod.</center>";
    }
</script>


sedikit soalan, kenapa elements table masuk dalam tagging <form></form> terus tak jalan?

mohon bantuan.. code asal guna form la plak..  :21:

Share this post


Link to post
Share on other sites

a'ah..function delete tu tak jalan..

mcm tak ada apa..

tapi bila test alert selepas myTable.deleteRow(i + 1);

dekat ui dah hilang..bila click OK dia papar balik..

 

adakah sebab bila letak form tagging secara default dia akan post form tuh?

Edited by atomic

Share this post


Link to post
Share on other sites

bagus betul la..kesilapan sikit jer..2 jam terbang..

<input type="button" onClick="DeleteRows()" value="Hapus">

bukan<button onClick="DeleteRows()">Hapus</button>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...