jq添加/删除列(PHP版)

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

溪缘...

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
	<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js"></script>
</head>
	<body>
		<div class="main">
			<div class="add-panel rule-dfn">
				<dl class="add-panel-inner">
					<dt class="add-hd">
						<span class="add-col rule-name">姓名
						</span>
						<span class="add-col rule-name">电话
						</span>
						<span class="add-col rule-name">邮箱
						</span>
						<span class="add-col rule-name">Q Q
						</span>
						<span class="add-col rule-name">岗位
						</span>
						<span class="add-col rule-addr">地址
						</span>
					</dt>
					<dd class="add-item self-define q-define">
						<div class="add-col">
							<input class="txt txt-name" maxlength="20" type="text" name="defineInfos[0][con_name]">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text" name="defineInfos[0][con_tel]">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text" name="defineInfos[0][con_mail]">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text" name="defineInfos[0][con_qq]">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text" name="defineInfos[0][con_pos]">
						</div>
						<div class="add-col rule-addr">
							<input class="txt rule-addr" type="text" name="defineInfos[0][con_addr]">
						</div>
						<a class="lnk-delete delete-self-define" href="javascript:void(0)">删除
						</a>
					</dd>
					<dd class="add-item self-define disappear" id="self-define-template">
						<div class="add-col">
							<input class="txt txt-name" maxlength="20" type="text">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text">
						</div>
						<div class="add-col">
							<input class="txt txt-name" type="text">
						</div>
						<div class="add-col rule-addr">
							<input class="txt rule-addr" type="text">
						</div>
						<a class="lnk-delete delete-self-define" href="javascript:void(0)">删除
						</a>
					</dd>
				</dl>
				<span class="btn-lnk self-define-add" id="q_add">
					<i class="fa fa-plus">
					</i>添加
				</span>
			</div>
		</div>
	</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

body, td, input, textarea, select,
button {
  color: #555;
  font-size: 12px;
  font-family: "Microsoft Yahei", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
}
body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset {
  margin: 0;
  padding: 0;
}
a {
  color: #3b639f;
  text-decoration: none;
  blr:expression(this.onFocus=this.blur()) }
a:hover {
  color: #CD0200;
  text-decoration: none;
}
.main {
  width:80%;
  margin:20px auto;
}
.disappear {
  display: none;
}
.btn-lnk {
  cursor: pointer;
}
.add-group-lst li {
  margin-bottom: 5px }
.add-supplier-hd, .add-supplier-fieldset {
  overflow: hidden;
}
.add-supplier-hd h4 {
  float: left;
  font-weight: 700 }
.add-supplier-hd a {
  float: right }
.add-supplier-bd {
  max-height: 300px;
  overflow-y: auto }
.add-supplier-item {
  background-color: #f2f2f2;
  padding: 10px;
  margin: 10px 0;
  position: relative }
.add-supplier-item .icon-close {
  position: absolute;
  right: 10px;
  top: 10px }
.add-supplier-fieldset li {
  float: left;
  margin: 0 10px 10px 0 }
.add-supplier-fieldset li label {
  display: block;
  margin-bottom: 5px }
.add-panel {
  padding: 0;
  margin-top: 3px;
  float: left;
  width: 620px }
.add-panel-inner {
  border: 1px solid #e6e6e6;
  margin-bottom: 5px }
.add-hd {
  height: 34px;
  line-height: 34px;
  background-color: #f7f7f7;
  padding: 0 15px;
  overflow: hidden }
.add-col {
  float: left;
  margin-right: 10px;
}
.add-item .lnk-delete {
  float: left;
  margin-top: 6px }
.add-item {
  overflow: hidden;
  padding: 9px 15px;
  border-top: 1px solid #e6e6e6 }
.add-hd .goods-name {
  width: 170px }
.add-hd .goods-quantity {
  width: 104px }
.add-hd .goods-unit {
  width: 105px }
.add-item .txt-name {
  width: 150px }
.add-item .txt-quantity {
  width: 94px }
.add-item .txt-total {
  width: 70px }
.add-item .txt-unit {
  width: 94px }
.rule-dfn .add-item .txt-name {
  width: 90px }
.rule-item, .rule-license-lst {
  overflow: hidden;
}
.rule-item {
  padding: 0 0 6px }
.rule-type {
  line-height: 30px;
  padding: 0 10px;
  background-color: #f7f7f7 }
.rule-fill {
  padding: 0 10px }
.rule-item-name {
  float: left;
  line-height: 34px;
  margin-right: 10px;
  width: 50px;
  text-align: right }
.rule-item-bd {
  float: left }
.rule-run-mode .rule-item-bd {
  padding-top: 8px }
.rule-item-bd label {
  margin-right: 10px }
.rule-item .location {
  float: left }
.rule-attach .rule-item-bd {
  padding-top: 5px }
.rule-attach .uploaded {
  padding: 3px 0 5px }
.rule-attach .uploaded a {
  margin-right: 10px }
.rule-run-mode .rule-item-bd li {
  float: left;
  margin-right: 10px;
  padding: 4px 0 10px }
.rule-cert {
  margin-top: 15px }
.rule-license-lst li {
  float: left;
  padding: 4px 0 10px;
  margin-right: 10px }
.rule-report-lst li {
  padding: 5px 0;
  height: 26px }
.rule-report-lst li label {
  float: left;
  line-height: 26px;
  width: 105px }
.rule-license-lst {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 5px }
.rule-license-lst li {
  margin-right: 20px }
.rule-dfn {
  width: 950px }
.rule-dfn .add-col {
  margin-right: 30px }
.txt-request {
  width: 150px }
.rule-dfn .rule-name {
  width: 102px }
.rule-dfn .rule-addr {
  width: 202px }
.rule-required, .rule-dfn .lnk-delete {
  margin-top: 4px }
.rule-dfn .lnk-delete {
  display: none;
}

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jq添加/删除列(PHP版)

分类

jQuery实例

描述