Foreword
In the beginning, I said that this form ready for background displaying user information, since it is the background, and ultimately, databases and backend language (such as PHP) to deal with, for example, I read the database and display the information by PHP. For simplicity the contents of this section, an XML file instead of storing a database of functions, the user information is stored in the XML file, as follows userinfo.xml
The display reads the results table below
Engineering sample code Click here to download
Sample Code
This section works following sample code
The project is created on the basis of the section, this section used only table5.php and userinfo.xml. The following directly on the code
table5.php content
<?php
//用户信息数组
$user_array = array(
array(
'ID' => '001',
'UserName' => '张三',
'Sex' => '男',
'Tel' => '111111',
),
array(
'ID' => '002',
'UserName' => '李四',
'Sex' => '男',
'Tel' => '222222',
),
array(
'ID' => '003',
'UserName' => '王五',
'Sex' => '男',
'Tel' => '333333',
),
array(
'ID' => '004',
'UserName' => '赵六',
'Sex' => '女',
'Tel' => '444444',
)
);
$xml = new XMLWriter();
$xml->openUri("userinfo.xml");
$xml->setIndentString(' ');
$xml->setIndent(TRUE);
$xml->startDocument('1.0','utf-8');
//开始创建文件
$xml->startElement('Users');
foreach($user_array as $user){
$xml->startElement('user');
if(is_array($user)){
foreach ($user as $key => $row) {
$xml->startElement($key);
$xml->text($row);
$xml->endElement();
}
}
$xml->endElement();
}
$xml->endElement();
$xml->endDocument();
$xml->flush();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table动态添加行</title>
<style type="text/css">
body{margin: 0;}
.main{
width: 600px;
margin-top: 10px;
margin-left:auto;
margin-right:auto;
}
.table{width: 100%;background-color: transparent;border-collapse:collapse;border-spacing:0}
.table th,.table td{padding:8px;line-height:20px;text-align: center;}
.table-border{border-top:1px solid #ddd;}
.table-border th,.table-border td{border-bottom: 1px solid #ddd;}
.table-bg thead{background-color: #f5fafe;}
.tableselected{background-color: #f5fafe;}
.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd}
.table-border.table-bordered{border-bottom:0}
.table-hover tbody tr:hover td{background-color:#f5f5f5}
</style>
</head>
<body>
<div class="main" >
<table class="table table-border table-bordered table-bg table-hover">
<thead>
<tr>
<th width="25"><input type="checkbox" name="" value="" ></th>
<th width="75">ID</th>
<th width="120">用户名</th>
<th width="80">性别</th>
<th width="130">电话</th>
<th width="170">操作</th>
</tr>
</thead>
<tbody>
<?php
$doc = new DOMDocument();
$doc->load("userinfo.xml");
$users = $doc->getElementsByTagName("user");
foreach($users as $user)
{
$ids = $user->getElementsByTagName("ID");
$id = $ids->item(0)->nodeValue;
$usernames = $user->getElementsByTagName("UserName");
$username = $usernames->item(0)->nodeValue;
$sexs = $user->getElementsByTagName("Sex");
$sex = $sexs->item(0)->nodeValue;
$tels = $user->getElementsByTagName("Tel");
$tel = $tels->item(0)->nodeValue;
?>
<tr>
<td><input type="checkbox" value="1" name=""></td>
<td><?php echo $id; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo $sex; ?></td>
<td><?php echo $tel; ?></td>
<td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/*checkbox全选*/
$("table thead th input:checkbox").on(
"click" ,
function(){
$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$(this).prop("checked"));
}
);
$("table tbody tr input:checkbox").on("click",
function(){
var ischeck = $(this).prop("checked");
if(ischeck == false)
{
$(this).closest("table").find("tr > th:first-child input:checkbox").prop("checked",$(this).prop("checked"));
}
}
);
/*删除*/
function article_del(obj){
var res = confirm('确认要删除吗？');
if(res == true)
{
$(obj).parents("tr").remove();
}
}
</script>
</body>
</html>
The main action of the head of the code is to generate the user information file userinfo.xml, once generated, and can be removed directly.
Epilogue
This chapter does not explain detailed, private letter I do not know. In this section you can also learn PHP knowledge to create and read XML documents. Ready to write the next section, knowledge of web front end, on the site navigation bar.
