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);
?>

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

获取table里面的td中的值
$("#trId").children("td").eq(0).text(); //当前行的第一个<td>的值 <td>下标 ...
IE浏览器中访问jsp页面，页面不执行ajax请求，后台控制台报错
问题描述:IE浏览器中访问jsp页面,页面不执行ajax请求,后台控制台报错:java.lang.IllegalArgumentException: Invalid character found i ...
js循环获取table中的值
<script type="text/javascript">function getTdValue() {var tableId = document.getElem ...
ie11上vue中使用elementui的input框无法输入中文
2019独角兽企业重金招聘Python工程师标准>>> vue2.0+elementui(elementui组件库--input)项目中,使用了如下elementui组件(input ...
html中设置td中内容的垂直位置
场景 td有一个属性valign,可以规定单元格内容的垂直排列方式. 有top.middle.bottom.baseline这四个值. 实现比如设置垂直位置居上位置: <td valign=& ...
jq 循环获取某class所有的attr里面的值
stuinfo这个class下面的所有的data-uid 代码: $('.stuinfo').each(function(){var uid= $(this).attr("data-uid& ...
JQ循环获取input的值 $(...)[i].val is not a function
可以试试以下方法 $(".item_address2").each(function(){console.log($(this).val()) });
循环获取另一个php变量,通过引用将多个变量传递给foreach循环(php)
场景/问题隔离 :假设我的程序使用多个变量.在程序开始时,我希望通过一个代码很少的通用函数同时操作许多变量,然后在流程的后面,在特定函数中只使用一些独特的变量. 问题 :如何通过引用foreach循环 ...
uniapp中修改uni.showModal弹框content内容样式
解决: 在项目common的style.scss中定义全局样式 .uni-modal{.uni-modal__bd{color: blue;font-size: 32rpx;font-weight: ...

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

页面图：

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

最新文章

热门文章