需要可以删除,修改,添加,感觉都对,但就是达不到效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>影视网站后台观看记录管理页面设计</title>
<style type="textćs">
body{
background-image:url(h.jpg);
}
.box1 {
border-radius: 20px;
box-sizing: border-box;
height: 1823px;
padding: 20px;
width: 823px;
}
.title{
font-size:30px;
text-align:center;
color:hotpink;
}
.table1{
border-style:solid;
border:1px;
border-color: hotpink;
}
.tr1{
color:mediumvioletred;
font-size:20px
}
.tr2{
color:mediumvioletred;
font-size:20px;
text-align:center;
}
.tr .button{
color:mediumvioletred;
font-size:20px;
}
<×yle>
<script type="text/javascript" >
var node;
var ok=0;
function deleteRow1(bdelete){
var currentindex=bdelete.parentNode.parentNode.rowIndex;
var mytable=document.getElementById("mytable");
if(confirm("")){
mytable.deleteRow(currentindex);
}
}
function insertEnd(){
var index=mytable.rows.length;
addRow(index);
}
function addRow(index){
var mytable=document.getElementById("mytable");
var row=mytable.insertRow(index);
var t1Cell=row.insertCell(1);
var t2Cell=row.insertCell(2);
var t3Cell=row.insertCell(3);
var t4Cell=row.insertCell(4);
var t5Cell=row.insertCell(5);
var t6Cell=row.insertCell(6);
t1Cell.innerHTML=node;
t2Cell.innerHTML=document.getElementById("t2").value;
t3Cell.innerHTML=document.getElementById("t3").value;
t4Cell.innerHTML=document.getElementById("t4").value;
t5Cell.innerHTML=document.getElementById("t5").value;
t6Cell.innerHTML="<input type='button' class='btn green' onclick='alter(this)' value='修改'/><br />
<input type='button' class='btn red' onclick='deleteRow1(this)' value='删除'/>";
document.getElementById("mytable1").style.display = "none";
}
var indexx;
function edit(btnEdit) {
ok=0;
document.getElementById("mytable1").style.display = "block";
document.getElementById("save").style.display="block";
document.getElementById("add1").style.display="none";
var mytable=document.getElementById("mytable");
indexx=btnEdit.parentNode.parentNode.rowIndex;
node = "<img width='128' height='180' src='"+mytable.rows[indexx].cells[1].childNodes[1].src+"'>";
document.getElementById("img1").src=mytable.rows[indexx].cells[1].childNodes[1].src;
document.getElementById("t2").value=mytable.rows[indexx].cells[2].innerHTML;
document.getElementById("t3").value=mytable.rows[indexx].cells[3].innerHTML;
document.getElementById("t4").value=mytable.rows[indexx].cells[4].innerHTML;
document.getElementById("t5").value=mytable.rows[indexx].cells[5].innerHTML;
document.getElementById("t6").value=mytable.rows[indexx].cells[6].innerHTML;
}
function change(btnChange){
var mytable=document.getElementById("mytable");
document.getElementById("mytable1").style.display="none";
/* indexx=btnChange.parentNode.parentNode.rowIndex; */
if(!ok){
node = "<img width='128' height='180' src='"+mytable.rows[indexx].cells[1].childNodes[1].src+"'>";
}
mytable.rows[indexx].cells[1].innerHTML=node;
mytable.rows[indexx].cells[2].innerHTML=document.getElementById("t2").value;
mytable.rows[indexx].cells[3].innerHTML=document.getElementById("t3").value;mytable.rows[indexx].cells[4].innerHTML=document.getElementById("t4").value;
mytable.rows[indexx].cells[5].innerHTML=document.getElementById("t5").value;
mytable.rows[indexx].cells[6].innerHTML=document.getElementById("t6").value;
}
function ClearForm(id) {
var objId = document.getElementById(id);
if (objId == undefined) {
return;
}
for (var i = 0; i < objId.elements.length; i++) {
if (objId.elements[i].type == "file") {
var file = objId.elements[i];
if (file.outerHTML) {
file.outerHTML = file.outerHTML;
} else {
file.value = "";
}
}
}
}
function add(){
var id=document.getElementById("tt");
ClearForm(id);
document.getElementById("img1").style.display="none";
document.getElementById("img1").src="";
document.getElementById("t1").value="";
document.getElementById("t2").value="";
document.getElementById("t3").value="";
document.getElementById("t4").value="";
document.getElementById("t5").value="";
document.getElementById("t6").value="";
document.getElementById("mytable1").style.display = "block";
document.getElementById("add1").style.display="block";
document.getElementById("save").style.display="none";
document.getElementById("mytable1").style.width="550px";
/* document.getElementById("mytable1").style.visibility="visible"; */
}
function showPic(obj) {
var fileUrl = getObjectURL(obj.files[0]);
if (fileUrl != null) {
document.getElementById("img1").src = fileUrl;
document.getElementById("img1").style = "opacity:1";
}
}
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url;
}
function changeImg(){
ok=1;
document.getElementById("img1").style.display="none";
var getImage = document.getElementById("t1");
getImage.oninput = function(){
var file = this.files;
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function(){
var image = document.createElement("img");
image.width = "128";
image.height = "180";
image.src = reader.result;
node = "<img width='128' height='180' src='"+reader.result+"'>";
}
}
return node;
console.log("node is:"+node);
}</script>
</head>
<body>
<div class="box1">
<div class="title">
后台影视记录管理
</div>
<table class="table1" id="mytable1" border="1px">
<col width="200"/>
<col width="200"/>
<col width="300"/>
<col width="500"/>
<col width="500"/>
<col width="500"/>
<col width="300"/>
<tr class="tr1">
<th>海 报</th>
<th>电影名</th>
<th>导演</th>
<th>主演</th>
<th>类 别</th>
<th>简 介</th>
<th>操 作</th>
</tr>
<tr class="tr2">
<td>
<img src="dq.jpg" style="width: 150px; height: 200px;" /></td>
<td>《断桥》</td>
<td>李玉</td>
<td>马思纯、王俊凯、范伟</td>
<td>犯罪,剧情</td>
<td>影片讲述了黄雀市大桥突然垮塌,桥墩中一副被活埋多年的人骨赫然惊现,死者女儿闻晓雨在一位自称孟超的男孩协助下走上探寻真相与复仇之路的故事。</td>
<td>
<input type="button" class="btn green" onclick="alter(this)" value="修改"/><br />
<input type="button" class="btn red" onclick="deleteRow1(this)" value="删除"/>
</td>
</tr>
<tr class="tr2">
<td>
<img src="w749.jpg" style="width: 150px; height: 200px;" />
</td>
<td>《749》</td>
<td>陆川</td>
<td>王俊凯、苗苗、郑恺</td>
<td>冒险、动作、奇幻</td>
<td>影片灵感源于导演陆川军校毕业后在749部队工作的一段经历。故事发生在2030年,讲述了749局第三小队战士们应对巨大灾难时展现的少年成长故事</td>
<td>
<input type="button" class="btn green" onclick="alter(this)" value="修改"/><br />
<input type="button" class="btn red" onclick="deleteRow1(this)" value="删除"/>
</td>
</tr>
<tr class="tr2">
<td>
<img src="jyzhd.jpg" style="width: 150px; height: 200px;" />
</td>
<td>《解忧杂货店》</td>
<td>韩杰</td>
<td>王俊凯、迪丽热巴、董子健</td>
<td>剧情、奇幻、治愈</td>
<td>该片改编自东野圭吾的同名小说,讲述一家名为“解忧杂货店”的店铺,人们只要在晚上把他们的烦恼写在信上然后丢进铁卷门的投递口,隔天就可以在店后的牛奶箱里取得解答信的故事</td>
<td>
<input type="button" class="btn green" onclick="alter(this)" value="修改"/><br />
<input type="button" class="btn red" onclick="deleteRow1(this)" value="删除"/>
</td>
</tr>
</table>
<input type="button" class="btn_add" id="tianjia" onclick="add()" value="添 加" />
<div class="form1" class="modify" style="margin:auto;" id="tt">
<table class="table2" id="mytable1"style="width: 500px;padding-left: 25px;">
<col width="50px"/>
<col width="400px"/>
<tr class="tr3">
<td>海报</td>
<td>
<input type="file" accept="image/*" id="t1" onchange="showPic(this)" onclick="changeImg() " />
<img src="" id="img1" style="display: none;opacity: 1;width: 128px;height: 180px;" />
</td>
</tr>
<tr class="tr4">
<td>电影名</td>
<td><input type="text" class="text1" id="t2" /></td>
</tr>
<tr class="tr5">
<td>导演</td>
<td><input type="text" class="text1" id="t3" /></td>
</tr>
<tr class="tr6">
<td>主演</td>
<td><input type="text" class="text1" id="t4" /></td>
</tr><tr class="tr7">
<td>类别</td>
<td><input type="text" class="text1" id="t5" /></td>
</tr>
<tr class="tr8">
<td>简介</td>
<td><textarea name="introduct" rows="10"cols="30" id="t6"></textarea></td>
</tr>
<tr class="tr9">
<td></td>
<td><input style="display:none;" type="button" value="提交" onclick="insertEnd()" class="btnsubmit" id="add1" />
<input type="button" value="保存" onclick="change(this)" class="btnsubmit" id="save" /></td>
</tr>
</table>
</div>
</body>
<cml>
```css
你这最后的标签是不是错了应该是</html>而不是<cml>
还有,代码41行封口封错了,应该是</style>而不是<xyle>
第180行先删除table的border样式
第279行把<cml>改为</html>
这样打开的时候就可以看到想要展示的页面
其次,你方法命名有问题,下面引用的方法上面都没有定义,怎么可能会实现呢?
```
这代码重复性太高了,看起来很累赘