<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後臺文章管理</title>
<script src='../js/jquery-1.4.4.min.js'></script>
<script src='../js/ajaxfileupload.js'></script>
</head>
<body>
<h1 align="center">資訊設置</h1>
<div align="center" id="tab">
<span><button>基本設置</button></span>
<span><button>數據添加</button></span>
</div>
<div id="contents">
<div align="center" class="cont">
<form action="article.php" method="post">
<table>
<tr>
<td>模板標題</td>
<td><input type="text" value="資訊排行" name='title'></td>
<td><input type="radio" name='is_display' value="on">不顯示模板標題</td>
<td><input type="radio" name='is_display' value="yes">顯示模板標題</td>
</tr>
<tr>
<td>顯示數量</td>
<td><input type="text" value="10" name='line'>條</td>
</tr>
<tr>
<td>標題字數</td>
<td><input type="text" value="6" name='word_number'>字</td>
</tr>
<tr>
<td><input type="submit" name="data" value="保存"></td>
</tr>
</table>
</form>
</div>
</div>
<div id="contents">
<div align="center" class="cont" style="display:none">
<form action="article.php" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>標題</td>
<td>內容</td>
<td>圖片</td>
<td><input type="button" value="新增" id="add"></td>
</tr>
<tr id="content" class="he">
<td><input type="text" name="title[]"></td>
<td><input type="text" name="content[]"></td>
<td><input type="file" name="thumb"></td>
<td><a href="javascript:void(0)" class="del">x</a></td>
</tr>
<tr>
<td><input type="submit" name="set" value="提交"></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
<script>
//tab切換
$("#tab span").click(function(){
var idx=$(this).index();
$(".cont").hide();
$("#contents div").eq(idx).show();
})
//追加
$("#add").live("click",function(){
var tr='';
tr += '<tr id="content" class="he">'
tr += '<td><input type="text" name="title[]"></td>'
tr += '<td><input type="text" name="content[]"></td>'
tr += '<td><input type="file" name="img[]"></td>'
tr += '<td><a href="javascript:void(0)" class="del">x</a></td>'
tr += '</tr>'
$("#content").after(tr);
var str=$(".he").size();
if(str>9)
{
alert("只可以添加10條");
return false;
}
})
//移除
$('.del').live('click',function(){
var str=$(".del").size();
if(str<2)
{
alert("不能刪了");
return false;
}
$(this).parent().parent().remove();
})
</script>tab切換 以及 jquery追加與移除
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Vue package-lock.json的作用
package-lock.json的作用 "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "h
前端 Vue-cli中 vue.config.js 的配置詳解
Vue-cli 3 / Vue-cli 4 目錄結構 ├── README.md # 說明 |-- dist # 打包後文件夾 ├── babel.config.js