table

table 基本使用

<table id="dataTable">
  <caption>
    <h1>vue3购物车案例</h1>
  </caption>
  <tr>
    <th>选择</th>
    <th>序号</th>
    <th>品名</th>
  </tr>

  <tr>
    <td></td>
    <td>{{ index + 1 }}</td>
    <td></td>
  </tr>

  <!-- 汇总 -->
  <tr>
    <td></td>
    <td></td>
    <td align="right">{{ totalAmount }}</td>
  </tr>
</table>

设置table 的行间距

td 内容对齐方式

将 td 内容右对齐，然后在右边填充 110px 的空间

<td align="right" style="padding-right: 110px">
	<input id="bad_source_mill" name="bad_source_mill" class="easyui-checkbox" 
         data-options="label:'不良原因-厂家：',
                       labelWidth:100,labelPosition:'before',value:true,checked:false">
</td>

表格数据操作

获取表格 ref

之后的操作都基于本获取表格 ref 的方法，不是通过 jquery ，通过 html 原生获取 DOM 节点的方法

const tableRef = document.getElementById(这里填写表格ID);

在表格末尾新增行

tableRef 是通过 html 原生方法获取 DOM 节点获取到的表格对象。调用方法 insertRow 时传入 -1 表示在表格末尾新增行，如果传入了大于 -1 的整数表示在指定行的下面新增行 - 可在表格中间插入新行。本方法返回新建的行

	// 在表格最后追加一个新行
	function insertRowAtLast(tableRef){
		let newRow = tableRef.insertRow(-1);
		return newRow;
	}

在行上新增单元格 - 新增列

下面方法的传入参数 tr 是上面“在表格末尾新增行”方法返回的行对象，colIndex 表示要新增的列的序号。本方法返回新创建的单元格对象 - td 对象

function insertCell(tr,colIndex){
  let newTD = tr.insertCell(colIndex);
  return newTD;
}

为单元格设置值

传入参数 td 是上面“在行上新增单元格 - 新增列” 方法返回的单元格对象，第二个参数 val 是为单元格设置的值

function setCellVal(td,val){
  td.innerHTML = val;
}

隐藏指定列

向表格填充数据后通过调用本方法隐藏指定列

	// tableId：表格ID
	// columns：需要控制的列序号构成的字符串，例：0，1，2
	// show： true 表示显示，false 表示隐藏
	function hideShowTableTd(tableId, columns, show) {
	     var strs = new Array(); //定义一数组
	     strs = columns.split(","); //字符分割
	     var tableTd = "";
	     for (var i = 0; i < strs.length; i++) {
	         tableTd += "td:eq(" + strs[i] + "),th:eq(" + strs[i] + "),"
	     }
	     tableTd = tableTd.substring(0, tableTd.length - 1);
	     if (show) {
	         $('#' + tableId + ' tr').find(tableTd).show();
	     }
	     if (!show) {
	         $('#' + tableId + ' tr').find(tableTd).hide();
	     }
 	}

删除行

行号1的传入参数 tr 是上面的方法新增行函数返回的行对象，那么 tdOperator 是自增的 td 对象。为 td 设置的值除了立即数、变量等，还可以设置 html 元素。行号7，8是获取指定单元格的内容，行号9为删除行。

let tdOperator = insertCell(tr,currentColIndex+1);
setCellVal(tdOperator,`<a href='javascript:;' onclick='deleteRow(this)'>删除</a>`);

	function deleteRow(obj){
		const tr = obj.parentNode.parentNode;
		const tds = tr.children;
		console.log(tds[0].innerHTML);
		console.log(tds[1].innerHTML);
		tr.parentNode.removeChild(tr);
	}

填充数据

下面函数是向表格控件填充数据，其中调用的方法都来自上面的知识点。

function fillData(){
  if( !tableData || tableData.length <=0 ) return

  for(let i = 0;i<tableData.length;i++){
    lastRowIndex = i;
    let tr = insertRowAtLast(table);
    let currentColIndex = 0;

    for(let j = 0;j<fields.length;j++){
      const field = fields[j];
      // if( !field.display ) continue;

      currentColIndex = j;
      let td = insertCell(tr,currentColIndex);
      setCellVal(td,tableData[i][field.name]);
    }

    let tdOperator = insertCell(tr,currentColIndex+1);
    setCellVal(tdOperator,`<a href='javascript:;' onclick='deleteRow(this)'>删除</a>`);

  }
}