JS针对动态增加表格的INPUT取值、赋值与传参的研究

第一部分，知识点总结：

上一节我们回顾了用innerHTML() insertROW clone新增动态表格。以上三种方法都可以动态新增。但取值的时候，经常不知所云，网上、教程又没有相同的答案。咨询过师兄之后，建议Onclick一个事件，取触发本页所含JS取值，建议之前我也进行操作了啊，并且几乎陷入fous()、onload()事件的大坑当中。
经验证发现，其实早在动态增加表格的时候，已经写入动态inpnut，并且传参，只不过我只熟悉FF，FF能够跟踪固定参数、固定字段的input值，没有console.log()的设置。后来我在虚拟机下载了个谷歌浏览器，这才console.log();调试出动态新增表格的input值。值得一提的是innerHTML，即可用作设置也能够获取元素值，目前应该算是最好的解决方案。
比较觉得用innerHTML()加上JS原生代码取值更加简单、直观一些。由于元素比较多，针对元素的DOM操作相对于精细。跳开for循环用索引取值，比较容易理解。我取到数据值如下：

对于写入和取出的理解，应该首先了解其属性，再动手不迟。可能需要了解的并区分的知识点，以及应用环境，在此记录一下。

innerhtml

document.getElementById(‘demo’).innerHTML
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
如：<div id="demo">这是内容</div> ，我们可以通过 document.getElementById('demo').innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById('demo').innerHTML='这是被插入的内容';` 这样就能向id为abc的对象插入内容。
首先getElementById()可以获取到页面上一个有id的元素，进而可以访问该元素的对应属性值，比如说value。

<input type="text" id="txt" value="hello html"/>

比如html页面中有上面这个id为txt的input元素

//获取该元素对象
var txt = document.getElementById('txt');
//获取该元素的值，即：hello html
var txtVal = txt.value;
//设置该元素的value属性值为boom
txt.value = 'boom';

如果一个元素没有value属性，那么使用document.getElementById().value是没有返回值的，比如一个div标签，就没有value属性。这类元素往往有起始标签和结束标签，比如说label，div等，就通过innerHTML来添加元素中的内容。

<script>
function addCon()
	{
		document.getElementById('lab1').innerHTML='this is a label';
		document.getElementById('div1').innerHTML='this is a div';
	}
</script>
<label id="lab1"></label>
<div id="div1"></div>
<input type="button" value="inner" onclick="addCon()">

点击按钮后，在label和div标签中就可以添加进内容，如果标签之前存在内容，innerHTML会替换掉对应的内容。如果想追加内容，可以通过innerText先获取之前的内容，拼接上新的内容后，再innerHTML。

function add()
	{
		var lab1 = document.getElementById('lab1');
		lab1.innerHTML=lab1.innerText+'this is a label';
		var div1 = document.getElementById('div1');
		div1.innerHTML=div1.innerText+'this is a div';
	}

温馨提醒： 前端写的少，总是会把innerHTML='xxx’写成innerHTML(‘xxx’),导致的结果就是报错，比如：TypeError: div1.innerHTML is not a function。

insertROW

clone

push();

alert();

document.write();

fous();

H5的dataform

Attribute(’’);

AJAX的data:$(’#form1’).serialize()

JQUERY的var form = $(“form[name=gagForm]”);

深拷贝与浅拷贝

1.浅拷贝

JavaScript存储对象都是存地址的，所以浅复制会导致 a 和 b 指向同一块内存地址。数组的赋值其实相当于给了索引，改变其中一个变量其他引用都会改变

var a = [1,2,3];  
var b = a;  
b[0] = 4;  
//a为4 2 3  
//b为4 2 3  
var a = [1,2,3];
var b = a;
b[0] = 4;
//a为4 2 3
//b为4 2 3

根据上面存储对象的问题，这里就可以解决另一个问题：

*原始参数（比如一个具体的数字）被作为值传递给函数；值被传递给函数，如果被调用函数改变了这个参数的值，这样的改变不会影响到全局或调用函数。
你传递一个对象（在js里数组不是简单数据类型，而是对象）到一个函数，如果在函数里面改变了这个参数的内容，在外部这个变化是可见的。*

2.深拷贝

（1）slice 函数

（2）concat 函数

（3）assgin

三个函数的原理都是返回数组的一个副本（相当于另外开辟内存空间），所以并不会改变数组本身的的值。但是这里有一点不同，就是assgin与其他两点的不同虽然说assgin也是深拷贝，但是他只是第一层深拷贝，第二层之后还是进行浅拷贝，例子如下：

var a = {  
    a1:{  
        aa1:'11',  
        aa2:'22'  
    }  
}  
var b = object.assgin({},a);  
var c = object.assgin({},a);  
b.a1.aa1 = 33;  
/*  
b:{  
    a1:{  
        aa1:'33',  
        aa2:'22'  
    }  
}  
c:{  
    a1:{  
        aa1:'33',  
        aa2:'22'  
    }  
}  
*/  
var a = {
	a1:{
		aa1:'11',
		aa2:'22'
	}
}
var b = object.assgin({},a);
var c = object.assgin({},a);
b.a1.aa1 = 33;
/*
b:{
	a1:{
		aa1:'33',
		aa2:'22'
	}
}
c:{
	a1:{
		aa1:'33',
		aa2:'22'
	}
}
*/

第二部分，数组的拆分、赋值与传参

【前情回要】Javascript操作DOM

2021.10.14是阳光灿烂的一天。困扰我多时的javascript操作 DOM入库问题终于解决了，不管格式对否至少是能够动态写入数据库。要知道我在这个问题上花费的心思堪比在算法上。

【第一节】前情回要和思路总结

1.先写一段html代码作为克隆的胚胎元素，input的ID定义好方便克隆时关联操作；
2.只看本章节第一部分的clone和innerhtml用法，其他暂时先忘掉。clone有深度克隆和浅度克隆，默认为深度；innerhtml既能写入又能写出，这很关键。
3.增删表格不做细品，但ID、Name等一定要捋清楚。有机会贴上代码。
4.由于是静态提交混合动态提交，除了form的动作控件外，增加一个事件οnclick=“getTableData(this.value)；“，也很关键，貌似在读取动态新增input数值时起到关键作用。
5.document.getElementById(”fileTable“)和AJAX异步提交（也有获取数据）。
关键代码如下：

```javascript
  //提取表格所有值,JSON格式，可以将该值赋予一个隐藏的input标签，提交表单至后台进行处理 
    function GetTableData() {    


        <!-- var mytable = document.getElementById("filedTable"); -->
		<!-- var msg = $("#filedTable").serialize(); -->
		<!-- var text = document.getElementById("filedTable").value; //获取ID为fileTable的元素值，赋值给text -->
		<!-- var tapposition1 = document.getElementById("tapposition1").value; //获取tapposition1元素值 -->
		<!-- var tapposition1 = document.getElementById("filedTable").value; //获取元素值，赋值给tapposition1 -->
        <!-- 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].value; -->
            <!-- } -->
        <!-- } -->
        <!-- return data; -->
		<!-- console.log(mytable);//得到所有TABLE的元素，包含自增长表格数据，遍历无效。 -->
		<!-- console.log(data);//得到数组,指针从0开始,但数据不可查看 -->
		<!-- console.log(text);//得到undfind -->
		<!-- console.log(msg);//空值，没有数据 -->
		<!-- console.log(tapposition1);//得到undfind -->





	var btn_add=document.getElementById("filedTable")//获取动态新增值，成功，将数据赋值给tb
	//var inputs = form.getElementsByTagName("input");//获得想要提交的所有div
	var rows = btn_add.rows;  //使得行指针rows获取到tb表长度，即原始的rows长度     
	//i为指针，小于rows长度自增，遍历新增table
	for(var i = 1; i<rows.length; i++ ){
	// 遍历该rows行的td（列）
		for(var j = 1; j<rows[i].cells.length; j++ ){    
		<!-- //第一种，取得动态新增所有行列数据 -->
			var addtb=btn_add.innerHTML; //tb取得order下面的所有值赋值给addtb(中间变量继承)，下一步让tb成为数组，或对应字段分开取值
		<!-- //第二种，取得某一行一列的数据 -->
			//var btn_add=document.getElementById ("filedTable").rows [i].cells[j];//取得某一行一列的数据，指针仅指向最后一个表格
			var tapposition1=rows[i].cells[1].innerHTML;//取得某一行一列的数据，赋值给某一字段，但并不能传递参数 
			var testab1=rows[i].cells[2].innerHTML;//取得某一行一列的数据，赋值给某一字段，但并不能传递参数 
			var testbc1=rows[i].cells[3].innerHTML;//取得某一行一列的数据，赋值给某一字段，但并不能传递参数 
			var testca1=rows[i].cells[4].innerHTML;//取得某一行一列的数据，赋值给某一字段，但并不能传递参数 
			var dataerror1=rows[i].cells[5].innerHTML;//取得某一行一列的数据，赋值给某一字段，但并不能传递参数 	
		//console.log(btn_add);

			$.ajax({
			type:"post",
			dataType:"json",
			data:{
				"tapposition1":tapposition1,
				"testab1":testab1,
				"testbc1":testbc1,
				"testca1":testca1,
				"dataerror1":dataerror1
			},
			url:'addReport',//目标地址'addReport'
			success:function(data){
					console.log("录入成功！");
			}
			});
		
			}		
		

			
			
		}


    }

【第二节】存在问题和梳理
存在问题：
1.由于是克隆（clone）的表格，克隆出来的input中录入的数值应当没问题，问题是Id没能实现自增长或+1，写入数据库的值，一抓一大把，全给分配给了预设字段，字段Id任其野蛮生长，这是不对的。

问题梳理：
1.我想要实现的目标是录入值和字段值一一对应，包含Id和input的数值都要一一对应起来。
2.在克隆input的时候，Id必须自增长。根据自增长Id获取的数值才能实现双向的一一对应。
3.到底是用默认的AJAX数据格式还是JSON数组？这要看难易程度吧！
理想效果如下：
input id=tapposition1 对应字段 tapposition1
input id=testab1 对应字段 testab1
input id=testbc1 对应字段 testbc1
input id=testca1 对应字段 testca1
input id=dataerror1 对应字段 dataerror1
input id=tapposition2 对应字段 tapposition2
input id=testab2 对应字段 testab2
input id=testbc2 对应字段 testbc2
input id=testca2 对应字段 testca2
input id=dataerror2 对应字段 dataerror2
以此类推。

4.获取参数时，定义字段=rows[i].cells[1].innerHTML，是否意味着某行某列在数字表格当中用“1.1、1.2、1.3、1.4、1.5"去标识？也就是rows[1].cells[1]?
假如我用数组，是否需要拆分才能实现input值与字段值的一一对应？
5.误差算法时，可以通过js、tpadmin的中间页去计算，再将结果写入数据库dataerror相关字段，或在数据库计算，回调在前端页面以表格形式展现。