Tìm hiểu về Javacript

Tìm hiểu về Javacript - Bài 4

Chỉ mục bài viết
Tìm hiểu về Javacript
Bài 2
Bài 3
Bài 4
Bài 5
Bài 6
Bài 7
Tất cả các trang

JPAGE_CURRENT_OF_TOTAL

BÀI 4: JAVACRIPT VỚI THẺ CHECKBOX CÙNG TÊN

Như bạn đã biết, mỗi khi trang web của bạn có một số lượng mẫu tin từ kết quả tìm kiếm hay liệt kê, muốn cho người dùng xóa hay cập nhật trên nhiều mẫu tin, bạn sẽ trình bày dữ liệu như cách trình bày dữ liệu liệt kê mail trong hộp mail điện tử yahoo hay hotmail.

Nếu trong table dữ liệu bạn có chứa bao nhiêu mẫu tin, server cript sẽ độc và phân trang, chẳng hạn như go to page 1 2 3 4 5 next hay previous 6 7 8 9 10 next

Trong phần này chúng ta giả định rằng một mẫu tin cố định, bằng cách tạo ra thẻ checkbox, cho phép người dùng chọn những mẫu tin họ cần cập nhật hay xóa chúng khỏi table.

<html>
<head>
<title>Welcome to JavaScript</title>
<link rel="stylesheet" type="text/css" href="/../style.css">
<SCRIPT language=JavaScript>
     function docheck(status,from_)
     {
       var alen=document.frmList.elements.length;
    //tính số phần tử có trên form
    alen=(alen>5)?document.frmList.chkid.length:0;
    if (alen>0)
    {
    //duyệt các phần tử nếu số mẫu tin nhiều hơn một
        for(var i=0;i<alen;i++)
      document.frmList.chkid[i].checked=status;
    }else
    {
      document.frmList.chkid.checked=status;
    }
    //gán trạng thái của thẻ chkall
    if(from_>0)
     document.frmList.chkall.checked=status;
     }
     function docheckone()
     {
       var alen=document.frmList.elements.length;
    //bạn cho rằng các thẻ chkid đều checked
    var isChecked=true;
    alen=(alen>5)?document.frmList.chkid.length:0;
    if (alen>0)
    {
    // kiểm tra nếu có ít nhất một thẻ chkid không checked, biến ischecked có giá trị false
        for(var i=0;i<alen;i++)
      if(document.frmList.chkid[i].checked==false)
       isChecked=false;
    }else
    {
    //trong trường hợp chỉ có một mẫu tin
     if(document.frmList.chkid.checked==false)
      isChecked=false;
    }
    //gán trạng thái của thẻ chkall bằng với giá trị của biến ischecked
    document.frmList.chkall.checked=isChecked;
     }
     function checkInput()
     {
    var alen=document.frmList.elements.length;
    var isChecked=false;
    alen=(alen>5)?document.frmList.chkid.length:0;
    if (alen>0)
    {
        for(var i=0;i<alen;i++)
      if(document.frmList.chkid[i].checked==true)
       isChecked=true;
    }else
    {
     if(document.frmList.chkid.checked==true)
      isChecked=true;
    }
    //nếu không check chkid, thông báo cho người dùng biết
    if (!isChecked)
    alert("Please select at least one of them");

   return isChecked;
    }
</script>
</head>
<body>

<div class=text_header><br>
Update/Delete Data</div>
<br>

<table width="354">
<form name="frmList" method="post" action="jsdo.php?goto=" onSubmit="return checkInput();">
    <tr>
      <td><b>My Orders</b></td>
    </tr>
    <tr>
      <td valign="top" height="79">
        <table width="100%" border="1" cellspacing="0" cellpadding="0">
          <tr>
            <td width="6%">
              <input type="checkbox" name="chkall" value="0" onClick="docheck(document.frmList.chkall.checked,0);">
            </td>
            <td width="30%"><b>Order No</b></td>
            <td width="36%"><b>Customer Name</b></td>
            <td width="28%"><b>Order Date</b></td>
          </tr>
          <tr>
            <td width="6%">
              <input type="checkbox" name="chkid" value="I00001" onClick="docheckone();">
            </td>
            <td width="30%">I00001</td>
            <td width="36%">Nguyen Van An</td>
            <td width="28%">Feb-12-2005</td>
          </tr>
          <tr>
            <td width="6%">
              <input type="checkbox" name="chkid" value="I00002" onclick="docheckone();">
            </td>
            <td width="30%">I00002</td>
            <td width="36%">Nguyen Chi Thanh</td>
            <td width="28%">Feb-13-2005</td>
          </tr>
          <tr>
            <td width="6%">
              <input type="checkbox" name="chkid" value="I00003" onClick="docheckone();">
            </td>
            <td width="30%">I00003</td>
            <td width="36%">Le Thuy Dan Thanh</td>
            <td width="28%">Feb-14-2005</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="left" class="text_normal" valign="top"><a href="javascript:docheck(true,1);">Check All</a>
        <a href="javascript:docheck(false,2);">Clear All</a></td>
    </tr>
    <tr>
      <td align="left" class="text_normal" valign="top">
        <input type="submit" style="width=80px" name="submit" value="Delete" class="button">
        <input type="submit" style="width=80px" name="submit" value="Update" class="button">
        <input type="reset" name="Reset" value="Reset" class="button">
      </td>
    </tr>
</form>
</table>
</body>
</html>

Lưu ý: nếu như bạn không chọn chkid nào mà bấm nút delete chẳng hạn thì xuất hiện thông báo như hình:

<< Lùi - Tiếp theo >>

	Hôm nay	2399
	Hôm qua	2309
	Trong tuần	18605
	Tuần trước	16660
	Trong tháng	72722
	Tháng trước	70507
	Tất cả	3108175

Thiet ke web gia re

Tìm hiểu về Javacript - Bài 4