JS批量删除和全选

由于本人刚接触javascript,理解起来有些吃力,所以如果有不对的地方希望大家提出来,我再加以改正。这次写的主要是针对JS的批量删除和全选。

先说说我对JS的理解吧,javascript是一种脚本语言,它往往不能独立使用,而是配合html/jsp/php/.net等等使用的,它是客户端脚本语言,也就是说,它是给用户们看的,既然是给用户们看的,那么,恰当的应用JS就会增强用户体验效果,让用户们看起来觉得好看,方便,才会愿意去看。程序员做一个程序目的不就是为了让他所做的能够得到更多的人认可么,谁也不想自己做一个网站没人关注。

下面就针对我用JS做的批量删除和全选说一下,我做的是用户列表页,先把数据从数据库里取出来,做成表,这样样就有数据了,我想实现的效果是,当我选N项,点击批量删除的时候,弹出一个对话框,提示”确认删除N项吗?“,点击”确定“按钮,提示”批量删除成功“,点击”取消“按钮,返回当前页面。

首先,加一个“批量删除”的按钮

<input class=”alldel” onclick=”return batchdel()” type=”submit”  value=”批量删除”>  //“onclick”意思是当点击的时候,会触发一个事件,会执行batchdel()这个函数里的内容。

<li><input type=”checkbox”  id=”check” name=”checks[]” value=”<?php echo $row[“id”];?>” ></li>    //我是用复选框实现我想要的效果。”value”=我所选择的id.

然后定义batchdel()函数里的内容

function batchdel()
{
var checkbox = document.getElementsByName(“checks[]”);  //定义一个变量checkbox,找到name为‘checks[]’的元素。
var number = 0;  //初始化一下number
if(checkbox.length != 0)  //判断条件是当选择的个数不为0时
{
for( i = 0; i < checkbox.length; i )  //循环遍历复选框
{
if (checkbox[i].checked == true)  //如果[i]个复选框为选中状态
{
number ;  //累加所选的个数
}
}
if(number == 0)  //如果个数=0,也就是没有选中内容的时候
{
alert(“请选择”);   //弹出一个提示框,提示用户请选择内容

}else
{
var txt=”确定删除这” number “项吗?”;   //定义一个变量txt ,显示内容是确认删除这number项吗?number为几,显示的就是几。
if (confirm(txt))   //判断txt,这里用到的是confirm函数,confirm的意思就是弹出一个带有“确定”和“取消”的提示框。
{
return true;
}
else
{
return false;
}
}
}

}

接下来说JS实现全选和取消全选

我想实现的是点击“全选”按钮的时候,复选框全部是选中状态,同时按钮上的字变成“取消全选”,再点击“取消全选“的时候,复选框全部都是没被选中的状态,同时按钮上的字再变回”全选“。

先定义一个按钮

<input type=”button” id=”all_checked” name=”all_checked” value=”全选” onclick=”checkedAll()” >

再定义checkedAll()

function checkedAll()
{
var allCheckVal = document.getElementById(“all_checked”).value;     //定义变量    allCheckVal = 按钮上的字(“全选”)
var checked = false;
if(allCheckVal == “全选”)  //当按钮上的字为“全选”时
{
document.getElementById(“all_checked”).value = “取消全选”;   //点击变成取消全选
checked = true;   //同时checked值为true
}
else
{
document.getElementById(“all_checked”).value = “全选”;
checked = false;
}

var allcheck=document.getElementsByName(“checks[]”);
for(var i=0;i<allcheck.length;i )
{
allcheck[i].checked = checked;
}
}

因为变量checked只可能有两个值,一个是true,一个是false,当点击’全选‘时,字变’取消全选‘,checked值为true,点击’取消全选‘时,字变’全选‘,checked值为false。

文本框间传值——JS

[singlepic id=224]

如果文本框有内容时,当我点击文本框时,当前内容会复制到今天1里,如果1里有内容,就会复制到2里,依次类推。

<textarea onclick=”oCopy1(this);” id=”yesterdayWork1″ name=”yesterdayWork1″ >

JS部分
if(document.getElementById(“todayWork1″).value==””)
{
document.getElementById(“todayWork1”).value=document.getElementById(“yesterdayWork1”).value;
}

展示部分代码,重要的是思路。

知识共享  资源共享  心得共享

MySql 数据表关联查询

当数据库中有两个表。当我想查询A表中某一字段和B表中的某些字段在一起查出并显示时。要用到联合查询。但前提是两个表中必须包含一个字段,下面请看详细例子。

以日志系统为例,我想查出某人某天的工作。在用户表里查出用户名,在工作表里查出工作和某天。

SELECT a.userName, b.* FROM user as a left join work_log as b on(a.userId=b.userId) where `date`=”2013-07-07″ order by `reorder`

根据字段进行排序

前一阵用PHP做了个工作日志系统用户名排序功能,首先在user表里增加reorder字段,通过reorder字段里的数字来进行排序。实现的方法先将遍历出来的用户表,每条数据对应用户ID和reorder字段的值,点击排序按钮后,将reorder值全部提交,并在数据库里更新。最后在查询时根据reorder排序即可。

<input type=”text” name=”<?=$r[“userId”]?>” id=”<?php echo $r[“userId”]; ?>” value=”<?php echo $r[“reorder”];?>” onkeyup=”value=value.replace(/[^\d]/g,””)” />

$reorder = $this->input->post();
foreach($reorder as $k=>$v)
{
$this->adduser_mdl->update1($k,$v);
}

关于CSS Sprites图片整合技术

CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿,当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片,即加快页面加载速度。本质是将用到的图片都集成为一张大图片,然后通过CSS的background-image和background-position属性进行定位,显示图片的不同部分。

一、适用哪里:CSS Sprites常用来合并频繁使用的图形元素,如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现,因为涉及内容的图片并不是每个页面都一样。

CSS Sprites一般只能使用到固定大小的容器里,这样才能够遮挡住不应该看到的部分。必须限制容器的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。当然,加大图片之间的距离,这样可以保持有限度的缩放。

二、具体实现:

1、图片合并:用photoshop将小图片们合并到一张大图上。

①合并之前就要仔细考虑它们的布局问题,以免不该出现的图片扰乱页面。例如下图这种背景一般用在文本列表中,实际应用的时候列表的行高往往比背景中的序号要大,所以在背景合并图片中间距应该比一般小图要大些,这样在页面中就不会将其它的小图给显示出来。

②在页面小图很多,需要做成多个sprites图片时,可以按颜色分类,尽量将相同、相近颜色的小图整合在一张大图上,这样可以有效减小合成后图片的体积。

③ 如果是规模较大的站,可以把需要横向平铺的所有图片做成一个图,需要纵向平铺的做成第二个图,把双向的和颜色非常复杂的单独放,其它的都做在一个图里。

④在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大;在面积相同的CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。

2、图片定位background-position:大图片的左上角坐标为(0,0),用photoshop分别读取各个子图片的坐标值(窗口→信息)。

举例:用ps把红、黄、蓝色三个子图50px*50px整合到一张图片上。

css样式如下:css

html代码:

html

网页效果:

关于 background-position负值的理解:固定好大小的容器,相当于一个窗口,这个窗口的位置是固定不动的,想通过这个窗口来显示背景图片上的指定子图片,就得移动这个背景图片,使指定子图出现在这个窗口。这个背景图片向左、向上移动是负值,那么相反,向右、向下移动就是正值。

PHP下对数组进行排序的函数

PHP提供了一些适合多种数组的排序函数,这些函数允许你在数组内部对元素进行排列,也允许用很多不同的方法对它们进行重新排序。在这篇文章中我们一起学习该排序中几个重要的几个函数。
简单排序
 <?php 
 $data = array(5,8,1,7,2); 
 sort($data); 
 print_r($data); 
 ?> 
输出结果
Array ([0] => 1 
[1] => 2 
[2] => 5 
[3] => 7 
[4] => 8 

也能使用rsort()函数进行排序,它的结果与前面所使用的sort()简单排序结果相反。Rsort()函数对数组元素进行从高到低的倒排,同样可以按数字大小排列也可以按字母顺序排列。
 <?php $data = array(5,8,1,7,2);rsort($data); print_r($data); 
 ?>  
它的输出结果如下:
Array ([0] => 8 
[1] => 7 
[2] => 5 
[3] => 2 
[4] => 1 

根据关键字排序 
当我们使用数组的时候,经常根据关键字对数组重新排序,从高到低。Ksort()函数就是根据关键字进行排序的函数,同时,它在排序的过程中会保持关键字的相关性。
<?php $data = array(“US” => “United States”, “IN” => “India”, “DE” => “Germany”, “ES” => “Spain”);ksort($data); print_r($data); 
?> 
输出结果如下: 
Array ([DE] => Germany 
[ES] => Spain 
[IN] => India 
[US] => United States 

Krsort()函数是根据关键字对数组进行倒排。
输出结果如下:
Array ([US] => United States 
[IN] => India 
[ES] => Spain 
[DE] => Germany 

根据值排序 
如果你想使用值排序来取代关键字排序的话,PHP也能满足你的要求。你只要使用asort()函数来代替先前提到的ksort()函数就可以了。
Array ([US] => United States 
[ES] => Spain 
[IN] => India 
[DE] => Germany 

自然语言排序 
PHP有一个非常独特的排序方式,这种方式使用认知而不是使用计算规则。这种特性称为自然语言排序,当创建模糊逻辑应用软件的时候这种排序方式非常有用。下面大家可以来看看它的一个简单例子。
<?php $data = array(“book-1″, “book-10″, “book-100″, “book-5″); sort($data);print_r($data); 
natsort($data); print_r($data);?> 
Array ([0] => book-1 
[1] => book-10 
[2] => book-100 
[3] => book-5 

Array 

[0] => book-1 
[3] => book-5 
[1] => book-10 
[2] => book-100 

它们的不同已经很清楚了:第二个排序结果更直观,更“人性化”,然而第一个则更符合算法规则,更具“计算机”特点。 
自然语言能进行倒排吗?答案是肯定的!只要对natsort()的结果使用array_reverse()函数就可以了。
Array ([0] => book-100 
[1] => book-10 
[2] => book-5 
[3] => book-1 

根据用户自定义的规则排序 
PHP也能让你定义自己的排序算法,你可以通过创建你自己的比较函数,并把它传递给usort()函数。如果第一个参数比第二个参数“小”的话,比较函数必须返回一个比0小的数,如果第一参数比第二个参数“大”的话,比较函数应该返回一个比0大的数。 
Listing I就是这样的一个例子,在这个例子中根据它们的长度对数组元素进行排序,最短的项放在最前面: 
<?php $data = array(“joe@host.com”, “john.doe@gh.co.uk”, “asmithsonian@us.info”, “jay@zoo.tw”);usort($data, ‘sortByLen”); 
print_r($data); function sortByLen($a, $b) { 
if (strlen($a) == strlen($b)) { 
return 0; 
} else { 
return (strlen($a) > strlen($b)) ? 1 : -1; 


?> 
这样,就创建了我们自己的比较函数,这个函数使用strlen()函数比较每一个字符串的个数,然后分别返回1,0或-1.这个返回值是决定元素排列的基础。下面是它的输出结果:
Array ([0] => jay@zoo.tw 
[1] => joe@host.com 
[2] => john.doe@gh.co.uk 
[3] => asmithsonian@us.info 

多维排序 
最后,PHP也允许在多维数组上执行一些比较复杂的排序——例如,首先对一个嵌套数组使用一个普通的关键字进行排序,然后再根据另一个关键字进行排序。这与使用SQL的ORDER BY语句对多个字段进行排序非常相似。为了能更好的明白它是如何工作的。
<?php $data = array(array(“id” => 1, “name” => “Boney M”, “rating” => 3), 
array(“id” => 2, “name” => “Take That”, “rating” => 1), 
array(“id” => 3, “name” => “The Killers”, “rating” => 4), 
array(“id” => 4, “name” => “Lusain”, “rating” => 3), 
); foreach ($data as $key => $value) { 
$name[$key] = $value[“name”]; 
$rating[$key] = $value[“rating”]; 

array_multisort($rating, $name, $data); print_r($data);?> 
这里,我们在$data数组中模拟了一个行和列数组。然后,我使用array_multisort()函数对数据集合进行重排,首先是根据rating进行排序,然后,如果rating相等的话,再根据name排序。它的输出结果如下: 
Array ([0] => Array 

[id] => 2 
[name] => Take That 
[rating] => 1 
) [1] => Array 

[id] => 1 
[name] => Boney M 
[rating] => 3 

[2] => Array 

[id] => 4 
[name] => Lusain 
[rating] => 3 

[3] => Array 

[id] => 3 
[name] => The Killers 
[rating] => 4 

)  
array_multisort()函数是PHP中最有用的函数之一,它有非常广泛的应用范围。另外,就如你在例子中所看到的,它能对多个不相关的数组进行排序,也可以使用其中的一个元素作为下次排序的基础,还可以对数据库结果集进行排序。 
这些例子应该让你对PHP中各种数组排序函数的使用有了初步的了解,也向你展示了一些隐藏在PHP数组处理工具包的内部功能。