.html.js（HTMLJS前端）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
今天给各位分享.html.js的知识，其中也会对HTMLJS前端进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、.html在JS是什么意思？
- 2、两个文件，一个.html,一个.js，怎么用js和html交互，js如何访问html,如何得到html里面的表格呢？
- 3、HTML中怎么引用JS ?
- 4、HTML和JS是什么关系?
.html在JS是什么意思？
我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
两个文件，一个.html,一个.js，怎么用js和html交互，js如何访问html,如何得到html里面的表格呢？
以下是纯js+html实现的增删改操作代码，你可以参考以下。当然也可以使用jquery之类的框架来实现，最终的原理都是一样的。
html
head
title增删改查/title
style type=""
tr{
text-align:center;
}
/style
script type="text/javascript"
//通过新增按钮来控制表格的显示与隐藏
var optionFlag = "save";
var updateRowIndex = -1;
var checkFlag=false;//默认为不显示
function show() {
optionFlag = "save";
var f = document.getElementById("did");//获得id为did的 div
if(!checkFlag) {
f.style.visibility="visible";
}else{
f.style.visibility="hidden";
}
checkFlag=!checkFlag;
}
//通过保存按钮将数据添加到表格中
function insertRow_() {
switch(optionFlag) {
case "save" :
insertRow_$save();
break;
case "update" :
insertRow_$update();
break;
default :
alert("操作失败。。。");
}
function insertRow_$save() {
//通过id获得要添加数据的表格
var table = document.getElementById("tableid");
//将所输入的内容赋给定义的变量
var titleName = document.getElementById("title").value;
var digestName = document.getElementById("digest").value;
var authorName = document.getElementById("author").value;
//获取下拉框内的内容
var selectIndex_ = document.getElementById("select");
var option = selectIndex_.options[selectIndex_.selectedIndex];
var selectName = option.text;
//获取编号的内容
var numberid = table.rows.length;
//在表尾添加一行数据
var row_ = table.insertRow(table.rows.length);
row_.insertCell(0).innerHTML = numberid;
row_.insertCell(1).innerHTML = titleName;
row_.insertCell(2).innerHTML = digestName;
row_.insertCell(3).innerHTML = authorName;
row_.insertCell(4).innerHTML = selectName;
row_.insertCell(5).innerHTML = 'input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"/inputnbsp;input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)/input';
document.getElementById("title").value = "";
document.getElementById("digest").value = "";
document.getElementById("author").value = "";
document.getElementById("select").options[0].selected="true";
var f = document.getElementById("did");
f.style.visibility="hidden";
alert("保存数据成功！！！");
}
//修改后的保存
var tr;
function insertRow_$update() {
var table = document.getElementById("tableid");
tr = table.rows[updateRowIndex];
var p = document.getElementById("title");
tr.cells[1].innerHTML = p.value;
p = document.getElementById("digest");
tr.cells[2].innerHTML = p.value;
p = document.getElementById("author");
tr.cells[3].innerHTML = p.value;
p = document.getElementById("select");
var Index_ = p.selectedIndex;
var option = p.options[Index_];
var selectName = option.text;
tr.cells[4].innerHTML = selectName;
document.getElementById("title").value = "";
document.getElementById("digest").value = "";
document.getElementById("author").value = "";
document.getElementById("select").options[0].selected="true";
var f = document.getElementById("did");
f.style.visibility="hidden";
alert("修改数据成功。。。");
}
}
//通过删除按钮 删除当前所在行
function delete_(row_) {
var table = document.getElementById("tableid");
table.deleteRow(row_.rowIndex);
refurbish_();
alert("删除数据成功！！！");
}
//刷新
function refurbish_() {
var table = document.getElementById("tableid");
//获得table的行数
var rows = table.rows;
for(var i=1;irows.length;i++) {
rows[i].cells[0].innerHTML = i;
}
}
//通修改按钮对table里的数据进行修改
function update_(row) {
updateRowIndex = row.rowIndex;
optionFlag = "update";
//对table里的数据进行回显
document.getElementById("title").value = row.cells[1].innerHTML;
document.getElementById("digest").value = row.cells[2].innerHTML;
document.getElementById("author").value = row.cells[3].innerHTML;
var selectText = row.cells[4].innerHTML;
var sel = document.getElementById("select");
var ops = sel.options;
for(var i=0;iops.length;i++) {
if(selectText==ops[i].text) {
sel.options[i].selected = "true";
}
}
var f = document.getElementById("did");
f.style.visibility="visible";
}
/script
/head
body
input type="button" value="新增" onclick="show()"/input
div
table border = "1" cellspacing = "0" id="tableid" width=100%
tr bgcolor="yellow"
th编号/th
th标题/th
th摘要/th
th作者/th
th类别/th
th操作/th
/tr
tr
td1/td
tddgsdg/td
tdsdgfd/td
tdghfhh/td
td基金/td
td
input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"/input
input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"/input
/td
/tr
/table
/div
br
div align="center" id="did" style="visibility:hidden"
form action=""
table
tr
td标题：/td
tdinput type="text" id="title"/input/td
td摘要：/td
tdinput type="text" id="digest"/input/td
/tr
tr
td作者：/td
tdinput type="text" id="author"/input/td
td类别：/td
td align="left"
select id="select"
option证劵/option
option基金/option
option股票/option
/select
/td
/tr
/table
br
center
input type="button" value="保存" onclick="insertRow_()"/input
input type="reset" value="重置"/input
/center
/form
/div
/body
/html
HTML中怎么引用JS ?
HTML中引用JS 步骤如下：
1、打开电脑端html编辑器，然后新建HTML文件，以便待会用来引入js文件。
2、如图，如果想在head标签中使用javascript脚步，那么最好加入window.onload,然后在花括号里面写js代码。
3、而如果是在body下边，那就好办多了，可以直接在script里面写js代码，不需window.onload。
4、也可以新建js文件，把html和js分离。
5、然后在js文件里面写代码，注意不要用script标签。
6、然后在script里面用src来把之前的js文件链接好即可。
HTML和JS是什么关系?
Web标准是由一系列规范组成，由于Web设计越来越趋向于整体化与结构化，此前的Web标准也逐步成为由三大部分组成的标准集：结构(Structure)、表现(Presentation)和行为(Behavior)。对应的网站标准也分三方面：结构化标准语言、表现标准语言(主要包括CSS)和行为标准。\x0d\x0a其中，html就是结构，主要存放网页一元素；\x0d\x0acss就是表现，对元素的样式进行设置，例如宽度，高度，位置，字体等等；\x0d\x0ajavascript就是行为，对元素取值，动态的改变等等
关于.html.js和HTMLJS前端的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
