js+html表格提交数据
<!DOCTYPE html>
<html lang="en">
<!----
这里通过原生js实现了表格输入功能，
总体分为一下步骤
1，创建一个表格
2，event.srcElement 获取激活事件的对象，获取已经点击的单元格索引
3，通过处理函数abc（）判断输入内容并将内容显示在新的表格中。
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table,
table td,
table tr {
border: 1px solid #000000;
width: 600px;
height: 50px;
text-align: center;
border-collapse: collapse;
overflow: hidden
}
input {
width: 30px;
height: 30px;
border:0;
}
</style>
<body>
<input type="text" placeholder="姓名" id="input1" value="张三">
<input type="text" placeholder="性别" id="input2" value="男">
<input type="text" placeholder="年龄" id="input3" value="19">
<button>生成</button>
<div style="height: 20px;"></div>
<table id="tb_1" onclick="TabClick();">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td><a href="#">删除</a></td>
</tr>
</table>
<b style="border-bottom:1px solid blue" onclick="showTableContent('tb_1')"> 获取表格内容</b><br/>
<b style="border-bottom:1px solid blue" onclick="sendToServer('tb_1')"> 发送到服务器</b>
<p><div id="result"></div></p>
<p><div id="result1"></div></p>
<script>
var table = document.querySelector('table')
var btn = document.querySelector('button')
function cj() {
//获取input框的内容
var text1 = document.getElementById('input1').value
var text2 = document.getElementById('input2').value
var text3 = document.getElementById('input3').value
var arr = [text1, text2, text3]
//创建表头
var tr1 = document.createElement('tr')
table.appendChild(tr1)
//把表格加到表头后面
for (let j = 0; j < 3; j++) {
var td1 = document.createElement('td')
tr1.appendChild(td1)
td1.innerHTML = arr[j]
}
//创建删除按钮
var td3 = document.createElement('td')
tr1.appendChild(td3)
var del = document.createElement('a')
del.href = "#"
del.innerHTML = '删除'
td3.appendChild(del)
//添加删除功能
del.onclick = remove
function remove() {
this.parentNode.parentNode.remove()
}
}
//按钮点击事件
btn.onclick = function () {
cj()
document.getElementById('input1').value = ''
document.getElementById('input2').value = ''
document.getElementById('input3').value = ''
}
</script>
<script>
function TabClick(){
var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td
// alert("行号：" + (td.parentElement.rowIndex) + "，列号：" + td.cellIndex);
let str =''
if(td.parentElement.rowIndex != undefined || td.cellIndex != undefined){
str = td.parentElement.rowIndex.toString() +td.cellIndex.toString()
var oldCellValue = td.innerHTML
//在单元格中插入一个input，并将它的id设置成行列组成的数字，将这个单元格的索引传递给失去焦点触发的函数,并将单元格的旧数据传递过去
//td.innerHTML="<input id='"+str+"' type='text' onblur = abc("+td.parentElement.rowIndex+","+td.cellIndex+","+oldValue+") name='temp' value='' >";
td.innerHTML="<input id='"+str+"' type='text' onblur = abc('"+td.parentElement.rowIndex+"','"+td.cellIndex+"','"+str.toString()+"','"+oldCellValue+"') name='temp' value='"+oldCellValue+"'/>";
var input1=document.getElementById(str); //获取到创建的input
input1.focus(); //让input获得焦点
} else {
console.log('否则'+td.parentElement.rowIndex);
}
}
function abc(row,cell,nInputId,oldCellValue){ //处理input失去焦点时的动作
/*
1,通过ID获得创建的input
2,通过ID获得当前表格
3,判断input是否输入了值
3.1没有输入就写入单元格之前的值
3.2输入了就写入输入过的值
4,通过传递过来的表格索引，给当前点击的单元格写入内容
*/
let nInput = document.getElementById(nInputId)
let table= document.getElementById('tb_1')
nInput.onchange = function(){
console.log('aaa')
}
if(nInput.vallue !='' ){
console.log(oldCellValue)
console.log(nInput.value)
table.rows[row].cells[cell].innerHTML = nInput.value
console.log('不是空的')
} else {
console.log('空')
table.rows[row].cells[cell].innerHTML = oldCellValue
}
if(table.rows[row].cells[cell] == ''){
table.rows[row].cells[cell].innerHTML = oldCellValue
}
}
</script>
<script>
/**
* 遍历表格内容返回数组
* @param Int id 表格id
* @return Array
*/
function getTableContent(id){
var mytable = document.getElementById(id);
var data = [];
for(var i=0,rows=mytable.rows.length; i<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
if(!data[i]){
data[i] = new Array();
}
data[i][j] = mytable.rows[i].cells[j].innerHTML;
}
}
return data;
}
/**
* 显示表格内容
* @param Int id 表格id
*/
function showTableContent(id){
var data = getTableContent(id);
var tmp = '';
console.log(data)
for(i=1,rows=data.length; i<rows; i++){//循环从第一行开始，0行作为表头，包含了JSON的键信息
for(j=0,cells=data[i].length-1; j<cells; j++){
tmp +="\""+ data[0][j]+"\"\:\""+data[i][j] + "\","//遍历数据加入使数据形成JSON格式。
}
tmp += ';';
}
let tmp1 = tmp.split(';')//用；号把数据分割成数组
var JsonTmp ={'a':'1'}
for(let i =0;i<tmp1.length;i++){ //循环用，号把数据分割成数组。
let qq = "{"+tmp1[i].substr(0,tmp1[i].length-1)+"}"//加上{}大括号才能使用JSON.parse()
JsonTmp[i] = JSON.parse(qq) //将字符串变成对象，放入对象变量中
}
console.log(tmp1)
Object.keys(JsonTmp).forEach(function(key){
console.log(key,JsonTmp[key]);
});
tmp += '<br/>数据类型是'+typeof(tmp)
document.getElementById('result').innerHTML = tmp;
document.getElementById('result1').innerHTML = tmp1;
//sendToServer(tmp1)
}
function sendToServer(tmp1){//将tmp1发送给后台，由后台处理数据变成JSON
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { //返回数据后在这里将数据写入当前页面
//document.getElementById('content').innerHTML = htmls;
document.getElementById(inputData.proId).innerHTML=xhr.responseText
}
}
xhr.open('POST','/outProduct');//设置URL前缀默认会在当前域名下加上如上后缀，例如：www.jsit.net.cn/outProduct
xhr.send(tmp1); //要发送的数据放在这里
}
</script>
</body>
</html>
