jq循环获取table中各td中input框的内容 ajax传到后台

最新推荐文章于 2021-10-21 09:19:45 发布

Cabbage coder

最新推荐文章于 2021-10-21 09:19:45 发布

阅读量1.1k

点赞数

分类专栏： PHP+前端三剑客+Ajax 文章标签： jquery php ajax js

本文链接：https://blog.csdn.net/weixin_45678130/article/details/113091125

版权

PHP+前端三剑客+Ajax 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

本文介绍了如何使用Bootstrap和JavaScript构建一个动态表格，用户可以输入商品信息并利用Ajax实时发送到PHP后端进行数据库存储。通过实例展示了如何获取表单数据、处理删除操作，并详细讲解了前端与后端的数据交互过程。

摘要由CSDN通过智能技术生成

页面图：

（点击确定后，将各td内容获取到，然后ajax传出，php接收然后传入数据库）
在这里插入图片描述

1.先放html的页面代码（用了bookstrap框架）：

 <table class="table table-hover" id="Result">
                                
                                <thead>
                                  <tr>
                                    <th>序号</th>
                                    <th>商品姓名</th>
                                    <th>商品单位</th>
                                    <th>商品价格</th>
                                    <th>商品描述</th>                                   
                                    <th>商品操作</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td> <div class="input-group input-group-sm">
                                        <span class="input-group-addon"></span>
                                        <input type="text" class="form-control" id="xuhao" >
                                    </div></td>
                                    <td> <div class="input-group input-group-sm">
                                        <span class="input-group-addon"></span>
                                        <input type="text" class="form-control"  id="name">
                                    </div></td>
                                    <td> <div class="input-group input-group-sm">
                                        <span class="input-group-addon"></span>
                                        <input type="text" class="form-control"  id="danwei">
                                    </div></td>
                                    <td> <div class="input-group input-group-sm">
                                        <span class="input-group-addon"></span>
                                        <input type="text" class="form-control"  id="money">
                                    </div></td>
                                    <td> <div class="input-group input-group-sm">
                                        <span class="input-group-addon"></span>
                                        <input type="text" class="form-control"  id="describe">
                                    </div></td>
                                    
                                    <td><button id="fat-btn" class="btn btn-primary" onclick="removeTr(this)" data-loading-text="Loading..." 
                                        type="button"> 删除
                                    </button></td>
                                  </tr>

                                </tbody>
                              </table>

2.js部分（动态生成行和删除行的）

 //    新增
    $(document).ready(function() {
        $('#jump').click(function() {
            layer.open({
                type: 1,
                title: "商品新增表单",
                area: ['1120px', '636px'], //宽高
                content: $('#newform'),
            })
        });
    });
   

    $("#new").click(function(){
        var result="";
result +="<tr>";
result +="<td> <div class='input-group input-group-sm'>";
result+="<span class='input-group-addon'></span>";
result+="<input type='text' class='form-control' id='xuhao'>";                 
result+="</div></td>"; 
result +="<td> <div class='input-group input-group-sm'>";
result+="<span class='input-group-addon'></span>";
result+="<input type='text' class='form-control' id='name'>";                 
result+="</div></td>"; 
result +="<td> <div class='input-group input-group-sm'>";
result+="<span class='input-group-addon'></span>";
result+="<input type='text' class='form-control' id='danwei'>";                 
result+="</div></td>"; 
result +="<td> <div class='input-group input-group-sm'>";
result+="<span class='input-group-addon'></span>";
result+="<input type='text' class='form-control' id='money'>";                 
result+="</div></td>";
result +="<td> <div class='input-group input-group-sm'>";
result+="<span class='input-group-addon'></span>";
result+="<input type='text' class='form-control' id='describe'>";                 
result+="</div></td>";  
                 
result +="<td><button id='fat-btn' class='btn btn-primary' οnclick='removeTr(this)' data-loading-text='Loading...'"; 
result+="type='button'> 删除 </button></td>" ;                 
result +="</tr>";
$("#Result tbody").append(result);
})


function removeTr(obj) {
        // alert('ssss');
        var tr= $(obj).parent().parent();
        tr.remove();
    }

3.获取table内容 +ajax

  $(".btn-primary").click(function(){
        if($(this).text()=="确定")
        {
   
    $now=0;
    $('#Result').find('tr').each(function () {
    var n_id;
    var n_name;
    var n_danwei;
    var n_money;
    var n_describe;
    $now++;
    $i=0;

   
                $(this).find('td').find('input').each(function () {  
                        if($i==0)
                        n_id=$(this).val();
                        else if($i==1)
                        n_name=$(this).val();
                        else if($i==2)
                        n_danwei=$(this).val();
                        else if($i==3)
                        n_money=$(this).val();
                        else 
                        n_describe=$(this).val();
                        $i++;
                }) 
                if($now!=1){
                    $.ajax({
        type:"POST",  
        url:"./php/new.php",  //当前页地址。发送请求的地址
        async: true,
        data:{
            goodsName:n_name,
            goodsDanwei:n_danwei,
            goodsMoney:n_money,
            ids:n_id,
            goodsDescribe:n_describe
            
        },
            success:function(data){
                
                    alert("添加商品成功！");
                   
                    window.location.reload();
                
            },
            //async:true,   //true为异步请求，false为同步请求
            error:function(){
                alert("请求失败");
            }
    });
                }
               
                
            })

重点代码（模板）：

$('#Result').find('tr').each(function () {
   
                $(this).find('td').find('input').each(function () {  
                      想获取什么
                })

最后：php接收：

<?php
header("Content-Type；text/html;charset=utf-8");
$name = $_POST ['goodsName'];
$danwei = $_POST ["goodsDanwei"];
$id = $_POST ["ids"];
$money=$_POST["goodsMoney"];
$describe=$_POST["goodsDescribe"];
$i=1;
echo $goods_name[$i];
$con=mysqli_connect("127.0.0.1","root","123456","wms");
$program_char="utf8";
mysqli_set_charset($con,$program_char);
if(mysqli_connect_errno($con)){
    echo "连接数据库失败".mysqli_connect_error();
}
function uuid($prefix = '')
{
  $chars = md5(uniqid(mt_rand(), true));
  $uuid  = substr($chars,0,8) . '-';
  $uuid .= substr($chars,8,4) . '-';
  $uuid .= substr($chars,12,4) . '-';
  $uuid .= substr($chars,16,4) . '-';
  $uuid .= substr($chars,20,12);
  return $prefix . $uuid;
}

$sql1="INSERT INTO bas_goods(id,goods_code,goods_name,goods_unit) VALUES(uuid(),'$id','$name','$danwei')";
$sql2="INSERT INTO saledata_goods(id,goods_code,goods_price,goods_describe) VALUES(uuid(),'$id','$money','$describe')";
$result=mysqli_query($con,$sql1);
$result2=mysqli_query($con,$sql2);
?>