一个简单的数据插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbs {
border-collapse: collapse;
text-align: center;
}
th {
width: 115px;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="text" placeholder="标题" id="biao" onblur="biao()"></td>
<td><input type="text" placeholder="发布人" id="fa" onblur="fa()"></td>
<td><input type="date" id="date" onblur="date()"></td>
<td>
<input type="radio" name="" id="" value="男" onchange="sexs = '男'">男
<input type="radio" name="" id="" value="女" onchange="sexs = '女'">女
</td>
<td>
<input type="checkbox" name="q" id="" value="吃">吃
<input type="checkbox" name="q" id="" value="吃屎">吃屎
<input type="checkbox" name="q" id="" value="吃黄色的屎">吃黄色的屎
</td>
<td>
<select name="" id="cheng" onchange="Shi()"></select>省
<select name="" id="shi"></select>
</td>
<td><input type="submit" value="提交" onclick="add()"></td>
</tr>
<tr>
<td><span id="span1" style="color: red;"></span></td>
<td><span id="span2" style="color: red;"></span></td>
<td><span id="span3" style="color: red;"></span></td>
<td><span id="span4" style="color: red;"></span></td>
<td><span id="span5" style="color: red;"></span></td>
<td><span id="span6" style="color: red;"></span></td>
</tr>
</table>
<table id="tbs" border="1">
<tr>
<th>序号</th>
<th>标题</th>
<th>发布人</th>
<th>时间</th>
<th>性别</th>
<th>爱好</th>
<th>地区</th>
<th>操作</th>
</tr>
</table>
</body>
<script>
var chengs = new Array("请选择", "湖南", "湖北");
var shis = new Array();
shis['请选择'] = ['请选择'];
shis['湖南'] = ['长沙市', '娄底市'];
shis['湖北'] = ['武汉市', '黄冈市'];
//调用函数
window.onload = function () {
Cheng();
Shi();
}
//初始化城市
function Cheng() {
var cheng = document.getElementById("cheng");
for (var i = 0; i < chengs.length; i++) {
var option = document.createElement("option");
option.innerText = chengs[i];
option.value = chengs[i];
cheng.appendChild(option);
}
}
//初始化市
function Shi() {
var shi = document.getElementById("shi");
shi.options.length = 0;
var cheng = document.getElementById("cheng").value;
for (var i = 0; i < shis[cheng].length; i++) {
var option = document.createElement("option");
option.innerText = shis[cheng][i];
option.value = shis[cheng][i];
shi.appendChild(option);
}
}
//判断标题
function biao() {
var b = document.getElementById("biao");
var biao = document.getElementById("biao").value;
var span1 = document.getElementById("span1");
if (biao == "") {
span1.innerHTML = "不能为空";
b.style.border = "red 1px solid"
return true;
} else {
span1.innerHTML = "";
b.style.border = "green 1px solid"
}
}
//判断发布人
function fa() {
var f = document.getElementById("fa");
var fa = document.getElementById("fa").value;
var span2 = document.getElementById("span2");
if (fa == "") {
span2.innerHTML = "不能为空";
f.style.border = "red 1px solid"
return true;
} else {
span2.innerHTML = "";
f.style.border = "green 1px solid"
}
}
//判断时间
function date() {
var d = document.getElementById("date");
var date = document.getElementById("date").value;
var span3 = document.getElementById("span3");
if (date == "") {
span3.innerHTML = "不能为空";
d.style.border = "red 1px solid"
return true;
} else {
span3.innerHTML = "";
d.style.border = "green 1px solid"
}
}
//获取性别
var sexs = "";
function sex() {
var span4 = document.getElementById("span4");
if (sexs == "") {
span4.innerHTML = "不能为空"
return true;
} else {
span4.innerHTML = "";
}
}
//多选框
var boxs = "";
function Box() {
var span5 = document.getElementById("span5")
var box = document.getElementsByName("q");
for (var i = 0; i < box.length; i++) {
if (box[i].checked) {
boxs = boxs + " " + box[i].value;
}
}
if (boxs == "") {
span5.innerHTML = "至少选择一个";
return true;
} else {
span5.innerHTML = "";
}
}
//判断下拉框
function Select() {
var span6 = document.getElementById("span6");
var cheng = document.getElementById("cheng").value;
var shi = document.getElementById("shi").value;
var chengshi = cheng + shi;
if (cheng == "请选择" && shi == "请选择") {
span6.innerHTML = "不能是空";
return true;
} else {
span6.innerHTML = "";
}
}
//添加
function add() {
if (biao()) {
return;
}
if (fa()) {
return;
}
if (date()) {
return;
}
if (sex()) {
return;
}
if (Box()) {
return;
}
if (Select()) {
return;
}
var tbs = document.getElementById("tbs");
var bia = document.getElementById("biao").value;
var f = document.getElementById("fa").value;
var dat = document.getElementById("date").value;
// var sexs = "";
// var boxs = "";
var cheng = document.getElementById("cheng").value;
var shi = document.getElementById("shi").value;
var chengshi = cheng + "省" + shi;
var arr = new Array("", bia, f, dat, sexs, boxs, chengshi);
var rows = tbs.rows[0];
var cells = rows.cells;
var newTr = document.createElement("tr");
for (var i = 0; i < cells.length; i++) {
if (i == cells.length - 1) {
var td = document.createElement("td");
var a = document.createElement("a");
a.innerHTML = "删除";
a.href = "#";
a.style.color = "red";
a.onclick = function () {
var aa = window.confirm("是否删除")
if (aa) {
a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
hao();
}
}
td.appendChild(a);
} else {
var td = document.createElement("td");
td.innerHTML = arr[i];
td.value = arr[i];
}
newTr.appendChild(td);
}
tbs.appendChild(newTr);
hao();
}
//序号
function hao() {
var tbs = document.getElementById("tbs");
var rows = tbs.rows;
for (var i = 1; i < rows.length; i++) {
var cells = rows[i].cells[0];
cells.innerHTML = i;
}
}
</script>
</html>