jquery实现动态表格
a.php
<script language=”javascript” src=”jquery.table.tr.js”></script>
<style type=”text/css”>
table
{
border: black solid 1px;
border-collapse: collapse;
}
td
{
border: black solid 1px;
padding: 3px;
}
.td_Num
{
width: 60px;
text-align: center;
}
.td_Item
{
width: 160px;
text-align: center;
}
.td_Oper
{
width: 120px;
text-align: center;
}
.td_Oper span
{
cursor: pointer;
}
</style>
<body>
<?php $url = “localhost”;
$user = “root”;
$password =””;
$con = mysql_connect($url,$user,$password);
mysql_query(“set names utf8”);
mysql_select_db(“abc”,$con);
?>
| 序号 | 步骤名称 | 步骤描述 | 相关操作 添加 |
<script type=”text/javascript”>
var currentStep = 0;
var max_line_num = 0;
//添加新记录
function add_line() {
max_line_num = $(“#content tr:last-child”).children(“td”).html();
if (max_line_num == null) {
max_line_num = 1;
}
else {
max_line_num = parseInt(max_line_num);
max_line_num += 1;
}
$(‘#content’).append(
“
“
” +
“
”
“
” +
“
“上移 ” +
“下移 ” +
“删除 ” +
“
” +
“
“);
}
//删除选择记录
function remove_line(index) {
if (index != null) {
currentStep = $(index).parent().parent().find(“td:first-child”).html();
}
if (currentStep == 0) {
alert(‘请选择一项!’);
return false;
}
if (confirm(“确定要删除改记录吗？”)) {
$(“#content tr”).each(function () {
var seq = parseInt($(this).children(“td”).html());
if (seq == currentStep) { $(this).remove(); }
if (seq > currentStep) { $(this).children(“td”).each(function (i) { if (i == 0) $(this).html(seq – 1); }); }
});
}
}
//上移
function up_exchange_line(index) {
if (index != null) {
currentStep = $(index).parent().parent().find(“td:first-child”).html();
}
if (currentStep == 0) {
alert(‘请选择一项!’);
return false;
}
if (currentStep <= 1) {
alert(‘已经是最顶项了!’);
return false;
}
var upStep = currentStep – 1;
//修改序号
$(‘#line’ + upStep + ” td:first-child”).html(currentStep);
$(‘#line’ + currentStep + ” td:first-child”).html(upStep);
//取得两行的内容
var upContent = $(‘#line’ + upStep).html();
var currentContent = $(‘#line’ + currentStep).html();
$(‘#line’ + upStep).html(currentContent);
//交换当前行与上一行内容
$(‘#line’ + currentStep).html(upContent);
$(‘#content tr’).each(function () { $(this).css(“background-color”, “#ffffff”); });
$(‘#line’ + upStep).css(“background-color”, “yellow”);
event.stopPropagation(); //阻止事件冒泡
}
//下移
function down_exchange_line(index) {
if (index != null) {
currentStep = $(index).parent().par、本文来源gao($daima.com搞@代@#码$网搞gaodaima代码ent().find(“td:first-child”).html();
}
if (currentStep == 0) {
alert(‘请选择一项!’);
return false;
}
if (currentStep >= max_line_num) {
alert(‘已经是最后一项了!’);
return false;
}
var nextStep = parseInt(currentStep) + 1;
//修改序号
$(‘#line’ + nextStep + ” td:first-child”).html(currentStep);
$(‘#line’ + currentStep + ” td:first-child”).html(nextStep);
//取得两行的内容
var nextContent = $(‘#line’ + nextStep).html();
var currentContent = $(‘#line’ + currentStep).html();
//交换当前行与上一行内容
$(‘#line’ + nextStep).html(currentContent);
$(‘#line’ + currentStep).html(nextContent);
$(‘#content tr’).each(function () { $(this).css(“background-color”, “#ffffff”); });
$(‘#line’ + nextStep).css(“background-color”, “yellow”);
event.stopPropagation(); //阻止事件冒泡
}
</script>
b.php
<?php
$url = “localhost”;
$user = “root”;
$password =””;
$con = mysql_connect($url,$user,$password);
mysql_query(“set names utf8”);
mysql_select_db(“abc”,$con);
$sql2=”INSERT INTO bz(bz) VALUES (‘$_POST[bz]’)”;
if(mysql_query($sql2)or die(mysql_error()));
?>
请教下各位大神怎样实现提交数据后每行表单的数据可以插入数据库，现在的情况是如果增加多行只有最后一行的数据可以插入数据库。。。。
——解决思路———————-
按 php 的约定：同名表单元素，在命名是要写作数组样式
即 name=’bz’ 应写作 name=’bz[]’
——解决思路———————-
这样会被后面的覆盖的。
需要改为数组形式。
转载请注明原文链接：jquery实现动态表格解决思路
