结合前段修改mysql表数据,请问JS怎样可以获取数据库里面的数据，并且可以修改数据以后再提交回去...

现在在做一个表格，表格的行数列数和内容都是数据库里面遍历来显示到网页的。网页需要动态获取数据库里的表格，做到修改表格里的数据，并且传回到数据库里。后台是用asp.net写的,数据库是SQL server。后台没有能实现，老师让前端动态获取数据库的数据然后修改。我不知道怎么样才能做到这样，甚至不知道可不可以做得到。

我的JS是通过JQ找父级子级关系来实现修改静态表格的，表都是我写死的，但是现在要加数据库，后台是遍历的，这样我找的关系应该就不能实现了。

----------------------补充提问--------------------------

既然前端无法获取后端数据库的数据，只能通过接口访问，请问我是不是只要实现可以对一行的修改然后提交，其他的就不用管了？后台他们会有ID还是隐藏域什么的来判断行号，点哪行的操作按钮就能直接对哪行的内容进行操作了？关于接口，我查了，但是没太懂，是不是要学了JSON才行？

前端页面：

显示状态：

更改状态：

HTML：

机电类检验项目单价表(单位：元) 添加
序号	部门	项目	简称	单价	操作
1	机电类	电梯定期检验	TD	44.00
2	机电类	未知名称	TDF	44.00

JS：

//----当一行中所有text都取消，保存按钮消失，取消键变删除键----

function caozuo(){

if(temp1 == "1"||temp2 == "1" ||temp3 =="1"){

$(".delete").css({"display":"none"});

$(".save").css({"display":"inline-block"});

$(".cancel").css({"display":"inline-block"});

}

}

//----当一行中所有text都取消，保存按钮消失，取消键变删除键----

//----取消文本框----

$(".cancel").click(function(){

$(".save").css({"display":"none"});

$(".delete").css({"display":"inline-block"});

$(this).css({"display":"none"});

// $(".text_proj").css({"display":"none"});

$(this).parent().siblings().children(".text_proj").css({"display":"none"});

$(this).parent().siblings().children(".text_abb").css({"display":"none"});

$(this).parent().siblings().children(".text_price").css({"display":"none"});

})

//----取消文本框----

//----双击对应的项目框，只显示点击的td里的框----

$(".update_proj").dblclick(function(){

temp1 = 1;

$(this).children(".text_proj").css({"display":"block"});

caozuo();

$(this).parents("tr").siblings().find(".cancel").css({"display":"none"});

$(this).parents("tr").siblings().find(".save").css({"display":"none"});

$(this).parents("tr").siblings().find(".delete").css({"display":"inline-block"});

})

//----双击对应的项目框，只显示点击的td里的框----

//----双击对应的简称框，只显示点击的td里的框----

$(".update_abb").dblclick(function(){

temp2 = 1;

$(this).children(".text_abb").css({"display":"block"});

caozuo();

$(this).parents("tr").siblings().find(".cancel").css({"display":"none"});

$(this).parents("tr").siblings().find(".save").css({"display":"none"});

$(this).parents("tr").siblings().find(".delete").css({"display":"inline-block"});

})

//----双击对应的简称框，只显示点击的td里的框----

//----双击对应的价格框，只显示点击的td里的框----

$(".update_price").dblclick(function(){

temp3 = 1;

$(this).children(".text_price").css({"display":"block"});

caozuo();

$(this).parents("tr").siblings().find(".cancel").css({"display":"none"});

$(this).parents("tr").siblings().find(".save").css({"display":"none"});

$(this).parents("tr").siblings().find(".delete").css({"display":"inline-block"});

})

//----双击对应的价格框，只显示点击的td里的框----

后台遍历表格(与HTML有些不一样，这个是前一版，现在HTML改了一些)：

修改  删除