这样的表格需要点击每一行保存后使用ajax动态增加一条数据到数据库请问怎样可以实现?

这样的表格需要点击每一行保存后使用ajax动态增加一条数据到数据库请问怎样可以实现?,第1张

1、写js代码,把你保存的那条记录中,商品名称、进货价格、销售价格 收集起来;

2、新建一个一般处理程序,接收前台传来的商品名称、进货价格、销售价格,通过调用后台方法保存到数据库。

3、使用jquery的$.ajax()方法,把第一步收集的信息发送到第二部新建的一般处理程序,把这个$.ajax()方法绑定到保存按钮的单击事件

你把问题描述的更清楚一些。你的ajax返回的是什么类型的数据啊?是json吗?

json的话,直接for循环不就可以了么。

for(int i =0 i< json.lengthi++)

{

    var tableHtml = '<thead><th>序号</th>......</thead>'

    tableHtml.append('<tr><td>json[i].id</td></tr>')

}

先定义一个表格,利用ajax首先加载一次数据。

<table id="t2">

<tr>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">序号</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">总交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">成功交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">成功百分比(%)</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">失败交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">失败百分比(%)</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">未知交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">未知百分比(%)</span></div></td>

<td width="20%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">统计时间段</span></div></td>

</tr>

</table>

然后在页面定义一个ajax方法定时去后台查询数据就可以。

function loadData(){

$.ajax({

type: "POST",

url: "<%=path %>/two",

dataType: "json",

data:{'startTime':startTime,'endTime':endTime},

success: function(returnedData){//查询成功之后填充表格

var html = ""

var tdHead = "<td height='20'><div align='center'><span class='STYLE1'>"

var tdFoot = "</span></div></td>"

$("#t2 tr:gt(0)").remove()//第一行是table的表格头不需清除。

for(var i=0i<returnedData.lengthi++){

var countInfo = returnedData[i]

var totalCount = countInfo.totalCount

var sucCount = countInfo.sucCount

var failCount = countInfo.failCount

var unknowCount = countInfo.unknowCount

var sucPercent = countInfo.sucPercent

var failPercent = countInfo.failPercent

var unknowPercent = countInfo.unknowPercent

var countTimeZone = countInfo.countTimeZone

html += "<tr>" + tdHead + (i + 1) + tdFoot +

tdHead + totalCount + tdFoot +

tdHead + sucCount + tdFoot +

tdHead + sucPercent + tdFoot +

tdHead + failCount + tdFoot +

tdHead + failPercent + tdFoot +

tdHead + unknowCount + tdFoot +

tdHead + unknowPercent + tdFoot +

tdHead + countTimeZone + tdFoot + "</tr>"

}

$("#t2").append(html)//将新数据填充到table

}

})

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11881364.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存