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

页面图:

(点击确定后,将各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);
?>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页