HTML，CSS和JavaScript三者结合的简单案例

您所在的位置：网站首页 › html怎么和css一起用 › HTML，CSS和JavaScript三者结合的简单案例

HTML，CSS和JavaScript三者结合的简单案例

2023-12-03 23:09| 来源: 网络整理| 查看: 265

HTML，CSS和JavaScript三者结合的简单案例通过三者结合实现。通过将输入框的输入内容添加至表单，每行都有对该行进行删除的超链接

Title

css代码区域

div{ text-align: center;/*让三个输入框居中*/ } table{ text-align: center;/*让表格的文本居中居中*/ margin: auto;/*让表格居中*/ } td,th{ width: 100px;/*设置单元格的长宽*/ height: 50px; border: 1px solid; }

HTML代码区域

编号：姓名：性别：学生信息表编号姓名性别操作编号姓名性别删除编号姓名性别删除

JavaScript代码区域

//获取添加按钮的对象 var elementById = document.getElementById("d"); //让添加按钮绑定点击事件 elementById.onclick=function (){ //通过id获取三个标签的对象 var elementById1 = document.getElementById("a"); var elementById2 = document.getElementById("b"); var elementById3 = document.getElementById("c"); //获取三个input标签的value值 var value1 = elementById1.value; var value2 = elementById2.value; var value3 = elementById3.value; //通过id获取table对象简单方法 var elementById4 = document.getElementById("e"); 通过HTMLDOM方法innerHTML，用table对象调用该方法并用"+="（意为再原有table表格的基础上在加内容） elementById4.innerHTML+="\n" + " "+value1+"\n" + " "+value2+"\n" + " "+value3+"\n" + " 删除\n" + "" 比较繁琐方法 /* //创建标签tr对象(即创建一行) var htmlTableRowElement = document.createElement("tr"); //创建标签td对象（即创建4个单元格，因为案例是4列） var htmlTableDataCellElement1 = document.createElement("td"); var htmlTableDataCellElement2 = document.createElement("td"); var htmlTableDataCellElement3 = document.createElement("td"); var htmlTableDataCellElement4 = document.createElement("td"); //创建标签tr对象(即创建一个超链接) var htmlAnchorElement = document.createElement("a"); htmlAnchorElement.href="javascript:void(0)";//对其的href属性赋值为javascript:void(0) htmlAnchorElement.setAttribute("onclick", "del(this)");//对其进行添加属性onclick,并调用删除方法 htmlAnchorElement.innerHTML="删除";//设置标签文本为删除 //对四个单元格的文本内容进行赋值，值为input标签获取值（即我们输入的值） htmlTableDataCellElement1.innerHTML=value1; htmlTableDataCellElement2.innerHTML=value2; htmlTableDataCellElement3.innerHTML=value3; /!* var text = document.createTextNode(value1); htmlTableDataCellElement1.appendChild(text); 这是另一种方式，即创建一个文本结点并将其文本赋值为获取的value1，再把该文本结点添加为tr的子节点（即添加为单元格的内容） *!/ //在一行的第四个单元格中添加子节点超链接 htmlTableDataCellElement4.appendChild(htmlAnchorElement); //在一行中添加子节点单元格 htmlTableRowElement.appendChild(htmlTableDataCellElement1); htmlTableRowElement.appendChild(htmlTableDataCellElement2); htmlTableRowElement.appendChild(htmlTableDataCellElement3); htmlTableRowElement.appendChild( htmlTableDataCellElement4); //通过id获取table对象 var elementById4 = document.getElementById("e"); //在已创建的table表格标签中添加一行 elementById4.appendChild(htmlTableRowElement) ; */ } //单击超链接删除，删除一行的方法 function del (obj) {//obj代表超链接自身对象 //通过超链接标签与其他标签的嵌套关系，获取表格对象 var parentElement = obj.parentNode.parentNode.parentNode; parentElement.removeChild(obj.parentNode.parentNode);//删除行对象 }

【本文地址】

HTML，CSS和JavaScript三者结合的简单案例

HTML，CSS和JavaScript三者结合的简单案例

今日新闻

推荐新闻