Home > Backend Development > PHP Tutorial > jquery实现动态表格

jquery实现动态表格

WBOY
Release: 2016-06-23 13:25:31
Original
838 people have browsed it

a.php


    jquery表格操作
    <script></script>
    


$user = "root";
$password ="";
$con = mysql_connect($url,$user,$password);
 mysql_query("set names utf8");
 mysql_select_db("abc",$con);
?>
    
        
            
            
            
            
        
    

                序号
            

                步骤名称
            

                步骤描述
            

                相关操作 添加
            

    
    

    




<script> <br /> var currentStep = 0; <br /> var max_line_num = 0; <br /> //添加新记录 <br /> function add_line() { <br /> max_line_num = $("#content tr:last-child").children("td").html(); <br /> if (max_line_num == null) { <br /> max_line_num = 1; <br /> } <br /> else { <br /> max_line_num = parseInt(max_line_num); <br /> max_line_num += 1; <br /> } <br /> $('#content').append( <br /> "<tr id='line" + max_line_num + "'>" + <br /> "<td class='td_Num'>" + max_line_num + "" + <br /> "<td class='td_Item'><input type='text' name='bz' class='stepName' value='步骤名称" + max_line_num + "'>" <br /> "<td class='td_Item'><input type='text' class='stepDescription' value='步骤描述" + max_line_num + "'>" + <br /> "<td class='td_Oper'>" + <br /> "<span onclick='up_exchange_line(this);'>上移 " + <br /> "<span onclick='down_exchange_line(this);'>下移 " + <br /> "<span onclick='remove_line(this);'>删除 " + <br /> "" + <br /> ""); <br /> } <br /> //删除选择记录 <br /> function remove_line(index) { <br /> if (index != null) { <br /> currentStep = $(index).parent().parent().find("td:first-child").html(); <br /> } <br /> if (currentStep == 0) { <br /> alert('请选择一项!'); <br /> return false; <br /> } <br /> if (confirm("确定要删除改记录吗?")) { <br /> $("#content tr").each(function () { <br /> var seq = parseInt($(this).children("td").html()); <br /> if (seq == currentStep) { $(this).remove(); } <br /> if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); } <br /> }); <br /> } <br /> } <br /> //上移 <br /> function up_exchange_line(index) { <br /> if (index != null) { <br /> currentStep = $(index).parent().parent().find("td:first-child").html(); <br /> } <br /> if (currentStep == 0) { <br /> alert('请选择一项!'); <br /> return false; <br /> } <br /> if (currentStep <= 1) { <br /> alert('已经是最顶项了!'); <br /> return false; <br /> } <br /> var upStep = currentStep - 1; <br /> //修改序号 <br /> $('#line' + upStep + " td:first-child").html(currentStep); <br /> $('#line' + currentStep + " td:first-child").html(upStep); <br /> //取得两行的内容 <br /> var upContent = $('#line' + upStep).html(); <br /> var currentContent = $('#line' + currentStep).html(); <br /> $('#line' + upStep).html(currentContent); <br /> //交换当前行与上一行内容 <br /> $('#line' + currentStep).html(upContent); <br /> $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); }); <br /> $('#line' + upStep).css("background-color", "yellow"); <br /> event.stopPropagation(); //阻止事件冒泡 <br /> } <br /> //下移 <br /> function down_exchange_line(index) { <br /> if (index != null) { <br /> currentStep = $(index).parent().parent().find("td:first-child").html(); <br /> } <br /> if (currentStep == 0) { <br /> alert('请选择一项!'); <br /> return false; <br /> } <br /> if (currentStep >= max_line_num) { <br /> alert('已经是最后一项了!'); <br /> return false; <br /> } <br /> var nextStep = parseInt(currentStep) + 1; <br /> //修改序号 <br /> $('#line' + nextStep + " td:first-child").html(currentStep); <br /> $('#line' + currentStep + " td:first-child").html(nextStep); <br /> //取得两行的内容 <br /> var nextContent = $('#line' + nextStep).html(); <br /> var currentContent = $('#line' + currentStep).html(); <br /> //交换当前行与上一行内容 <br /> $('#line' + nextStep).html(currentContent); <br /> $('#line' + currentStep).html(nextContent); <br /> $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); }); <br /> $('#line' + nextStep).css("background-color", "yellow"); <br /> event.stopPropagation(); //阻止事件冒泡 <br /> } <br /> <br /></script>

b.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[]'



这样会被后面的覆盖的。
需要改为数组形式。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template