【JavaScript】工作常用模板记录--持续更新

1. table 列表input批量转换为json格式数据（table行不合并）

  /**
 1. 假设table中每行中的每一个td中的input 为：
 2. <input data-did='name' class='form-control' name='list["+index+"].name' value='xxx'/>
 3. 注：list["+index+"]，该前缀表示同一类型的数组，方便后端取值，按实际情况使用
  **/
  
 var labelList = [];//存放json数组
//标签 -- 按行循环每一行所有的input
$("#tableId").find("tr").each(function () {
	var labels ={};
	$(this).find("input").each(function () {
		var label = $(this);
		var name = label.attr("name");//json key
		if (name){
			//name.split(".")[1] 为 真实的 name，按实际情况使用
			labels[name.split(".")[1]] = label.val();//设置 key->value
		}
	});
	labelList.push(labels);
});
console.log("标签值列表",labelList);

2. table列表input批量转换为json格式数据（table行合并 ）

/**
* 假设多个table，每个table的格式为
* <table>
*    <tr>
*      <td rowspan="3"><input name="chkOne" data-rowspan='3' data-seg-index="3"type="checkbox"></td>
*      <td rowspan="3"><input data-did='name' class='form-control' name='name' value='xxx'/></td>
*      <td rowspan="3"><input data-did='name1' class='form-control' name='name1' value='xxx'/></td>
*      <td><input data-did='name2' class='form-control' name='name2' value='xxx'/></td>
*      <td><input data-did='name3' class='form-control' name='name3' value='xxx'/></td>
*    <tr>
*     <tr>
*      <td><input data-did='name2' class='form-control' name='name2' value='xxx'/></td>
*      <td><input data-did='name3' class='form-control' name='name3' value='xxx'/></td>
*    <tr>
*  <tr>
*      <td><input data-did='name2' class='form-control' name='name2' value='xxx'/></td>
*      <td><input data-did='name3' class='form-control' name='name3' value='xxx'/></td>
*    <tr>
*
需要的数据格式为:
{
  "table": [
    { 
      "name": "name", "name1": "name1",
      "data":
          [
            {"name2": "114524","name3": "xxx"},
            {"name2": "114524","name3": "xxx"}
          ]
    },
    { 
      "name": "name", "name1": "name1",
      "data":
          [
            {"name2": "114524","name3": "xxx"},
            {"name2": "114524","name3": "xxx"}
          ]
    }   
  ],
  "table2": [
    {
      "name": "name", "name1": "name1",
      "data":
      [
        {"name2": "114524","name3": "xxx"},
        {"name2": "114524","name3": "xxx"}
      ]
    },
    {
      "name": "name", "name1": "name1",
      "data":
      [
        {"name2": "114524","name3": "xxx"},
        {"name2": "114524","name3": "xxx"}
      ]
    }
  ]
}
思路：扫描法
1.遍历每个table
2.遍历table中的每个合并行，找到rowspan的值，从该行开始往下遍历余下的被合并行
3.遍历每行数据
**/
var dataInfo = {};
//循环每个tabel
$(".table").each(function () {
  var tabelData = [];//存放table数据数组
  var tableType = $(this).attr("name");
  //查找每一个合并行前的选框（也可以指定其他的标志），筛选出所有的合并行
  $(this).find("[data-seg-index]").each(function () {
     var span = $(this).attr("data-rowspan");//合并行数
     var tr = $(this).parent().parent();//父亲的父亲，即 tr
     var json = {};//存放公共数据及每行独有数据
     var list = [];//用于存放下面的data数组
     var data = {};//存放每一行独有的数据
     var commonCol = ['name','name1'];//每一行的公共key
     var dataCol = ['name2','name3'];//最底层的 key
           
     //遍历合并行的数据 
     tr.find("input").each(function () {
        var $_this = $(this);
        var did = $_this.attr("name");
        if (commonCol.includes(did)){
           json[did] = $_this.val();//合并行公共数据
        }
        if (dataCol.includes(did)) {
           data[did] = $_this.val();//合并行独有数据
        }
     });
     list.push(data);//合并行数据入库
     
     var trs = tr.nextAll();//合并行所有的兄弟行（后面所有的行）
     var i =0;//记录遍历次数
     //遍历被合并的行
     trs.each(function () {
         i++;
         //如果遍历次数 小于 合并数量，则表明，该数组还没遍历完，继续遍历
         if (i < span){
             data = {};//清空数据
             $(this).find("input").each(function () {
                 var $_this = $(this);
                 var did = $_this.attr("name");
                 data[did] = $_this.val();// key --> value
             });
             list.push(data);//被合并行数据入库
         }
     });
     json.data = list;
     tabelData.push(json);
    });
    dataInfo[tableType] = typeData;
});
//打印数据
console.log(JSON.stringify(dataInfo)) ;