html如何对数据库进行行增删

2025-11-04 06:22:32

1、要求：

做出一个表格，在表格中完成数据的添加，删除，修改，排序，以及重复检查。

2、实现过程

在做这个实验是在老师把表格给弄好后，以及完成表格的删除行和添加数据的基础上实现的。其中我自己完善的有关于数据的保存，修改，和如果当有序号重复时，其会报错，也就是这个程序是以序号不重复为标准进行其他的操作。运用了onclick的事件响应，通过在表格中进行响应其他的操作。

3、实现遇到的问题：

在实现完成修改操作时，我要将table中的数据返回到input标签中进行修改，所以这就用到了innerHTML属性，在这里innerHTML扮演着两个角色，一个是获取对象的内容，二是向对象中插入内容，var a=atr.rows[i].col[0].innerHTML;这是获取对象表格中的属性，document.getElementById(“xuhao”).innerHTML=a;这是设置input中的内容为表格的中所要修改的内容。还有就是需要知道innerHTML和innerText的区别，innerText方法可以获取或者更改某元素的文本字符串内容，但是innerText不是W3C的标准方法，所以不受FireFox浏览器的支持，兼容IE和谷歌浏览器。innerHTML同样可以获得元素内的html内容包括字符串和html标签元素，innerHTML是html的特有属性，虽然其也不是W3C的标准属性，但是所有的主流浏览器都能使用，textContent与innerText的作用相同，但是唯一的区别是，textContent能被FireFox支持，但是innerText不能，但是textContent只能被FreFox支持。

第二个问题就是保存：在做保存是，就是要把更改的内容给保存，并且在下次打开的时候能够把保存的内容也打开，这就要用到window对象的open方法，和document对象的open，write，和close方法，window的open方法有三个参数，其格式是window.open(“url”,”网页名字”，设置的属性)；url是所要打开的网页的名字，网页名字：是为打开的这个网页重新改的名字。设置属性：指的是设置所要打开的网页的属性。Document的write方法是将一定的内容写到所打开的文档中，其格式是document.write(内容);内容：就是你要添加的内容。

Document.open(“格式”,’replace’);其中格式：是指你所要插入的文档的格式（比如说text/html格式）。

4、遇到问题及为解决的问题

在这里没有解决的问题就是在保存时如何不用新建一个网页将其保存，而是直接就保存到原网页，更改其代码。

5、心得体会

突然觉的自己完成一个功能是一件很开心的事，同时也发现了一些以前一个错误的想法，就是写总结浪费时间，其实写总结有利于对知识点的掌握，同时锻炼如何很好的表达自己的思想，不至于只会写代码，而不知道其思想过程，和也没有思考其中的不足。

在下面的代码中可能会遇到一个问题，就是在保存时如果没有保存到以前的网页所在的路径下，那么打开新保存的页面可能会出现排版的问题，那是因为是用的时bootstrap框架布局，在保存是没有在该框架的文件路径下，所以导致排版不对，解决办法只需要把其保存到原来的路径下就行。

6、实验截图

html如何对数据库进行行增删

7、源代码

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

var dt = document.getElementById("dt");

var data;

var hanghao=1;

function init(){

data=document.getElementById("data");

//deletearow();

// tianjia(2,"zhangsan","路人甲");

}

//添加一行

function tianjia(bianhao,xingming,chuohao){

var rows=data.rows;

for(var i=0;i<rows.length;i++){

if(bianhao==rows[i].cells[0].innerText){

window.alert("已经存在该编号的用户，请重新输入");

return;

}

var atr=data.insertRow(rows.length);

var tda=atr.insertCell();

var tdb=atr.insertCell();

var tdc=atr.insertCell();

var tdd=atr.insertCell();

atr.id="tr"+hanghao;

tda.innerText=bianhao;

tdb.innerText=xingming;

tdc.innerText=chuohao;

tdd.innerHTML="<button class='btn btn-primary' onclick=\"xiugai('"+atr.id+"')\">修改</button><button class='btn btn-primary' onclick=\"deletearow('"+atr.id+"')\">删除</button>";

hanghao++;

}

function xiugai(atrid){

var xuhao=document.getElementById("xuhao");

var xingming=document.getElementById("xingming");

var chuohao=document.getElementById("chuohao");

var rows=data.rows;

for(var i=0;i<rows.length;i++){

var atr=rows[i];

if(atr.id==atrid){

// cols = atr.getElementByTagName('td');

//alert(cols.length);

var a = atr.cells[0].innerText;

var b = atr.cells[1].innerText;

var c = atr.cells[2].innerText;

document.getElementById("xuhao").value=a;

document.getElementById("xingming").value=b;

document.getElementById("chuohao").value=c;

}

function deletearow(atrid){

if(confirm("确定要删除吗？")){

var rows=data.rows;

for(var i=0;i<rows.length;i++){

var atr=rows[i];

if(atr.id==atrid){

data.deleteRow(i);

}

function dotianjia(){

var xuhao=document.getElementById("xuhao");

var xingming=document.getElementById("xingming");

var chuohao=document.getElementById("chuohao");

tianjia(xuhao.value,xingming.value,chuohao.value);

}

function dobaocun(){

var winname=window.open('','_blank');

winname.document.open('text/html','replace');

var code=document.getElementById("dt").innerHTML;

winname.document.write(code);

winname.document.execCommand('saveas','table.html');

winname.close();

}

</script>

</head>

<div>

</div>

<div>

<form>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</form>

</div>

<div>

</table>

</div>

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。