From b4d3d39c958ee4e11f9fddfc6522f94575b1a6c7 Mon Sep 17 00:00:00 2001 From: Pankaj Jain Date: Tue, 21 Apr 2020 14:58:31 +0530 Subject: [PATCH] fix tr attributes --- README.md | 8 +++---- table.js | 72 ++++++++++++++++++++++++++++++------------------------- 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index eb0b2fd..2c532ec 100644 --- a/README.md +++ b/README.md @@ -8,18 +8,18 @@ Bootstrap # CDN - - + + # How to use let headRow = [{ text: `Name` }]; -let dataRows = [ +let dataRows = {data: [ {text: `Pankaj`}, {text: `Ram`}, {text: `Tarun`} -]; +]}; let newDynamicTable = new DynamicTable({ divId: `tableDiv`, tableId: `tableData`, headRow, dataRows, head2Row, footRow, functionArray }); diff --git a/table.js b/table.js index bf0c7d2..5075d26 100644 --- a/table.js +++ b/table.js @@ -155,51 +155,59 @@ class DynamicTable { let { addCheckboxes, checkboxClass } = this.paramObject; let divisionNode = this._getNode(divisionName); tableNode.appendChild(divisionNode); - let rowNode = this._getNode(`tr`); - divisionNode.appendChild(rowNode); - this._addData(rowNode, `S.No.`, dataArray, `th`, divisionName); + let trNode = this._getNode(`tr`); + divisionNode.appendChild(trNode); + this._addData(trNode, `S.No.`, dataArray, `th`, divisionName); if (dataArray2 && dataArray2.length) { - rowNode = this._getNode(`tr`); - divisionNode.appendChild(rowNode); - this._addData(rowNode, `S.No.`, dataArray2, `th`, divisionName); + trNode = this._getNode(`tr`); + divisionNode.appendChild(trNode); + this._addData(trNode, `S.No.`, dataArray2, `th`, divisionName); } this._checkboxToggle(divisionName); } _addTableDataRows() { - let { dataRows, functionArray, addFilter, addLimit } = this.paramObject; + let { dataRows, functionArray } = this.paramObject; this._clearNode(this.bodyNode); if (typeof dataRows === `string`) { this.bodyNode.insertAdjacentHTML(`beforeend`, dataRows); } else { - let filterTerm; - if (addFilter) { - filterTerm = this.filterNode.value.toLowerCase(); - } - let serialNumber = 0; - let limitNumber = 0; - let rowNode; - dataRows.forEach(currentRow => { + _addTableDataRowsFromObject(); + } + if (functionArray) { + functionArray.forEach(currentObject => { + let { className, eventName, functionName } = currentObject; + this._attachFunctionToClassNodes(className, eventName, functionName); + }); + } + } + + _addTableDataRowsFromObject() { + let { dataRows, addFilter, addLimit } = this.paramObject; + let { className, data, id } = dataRows; + let filterTerm; + if (addFilter) { + filterTerm = this.filterNode.value.toLowerCase(); + } + let serialNumber = 0; + let limitNumber = 0; + let rowNode; + if (data) { + data.forEach(currentRow => { if (!addFilter || this._filterData(filterTerm, currentRow)) { serialNumber++; if (!addLimit || this.limitNode.value === `all` || this.limitNode.value >= serialNumber) { limitNumber++; - rowNode = this._getNode(`tr`); + rowNode = this._getNode(`tr`, { className, id }); this.bodyNode.appendChild(rowNode); this._addData(rowNode, serialNumber, currentRow, `td`, serialNumber); } } }); - this._clearNode(this.countNode); - let textNode = document.createTextNode(`Showing 1 to ${limitNumber} of ${serialNumber} entries`); - this.countNode.appendChild(textNode); - } - if (functionArray) { - functionArray.forEach(currentObject => { - let { className, eventName, functionName } = currentObject; - this._attachFunctionToClassNodes(className, eventName, functionName); - }); } + this._clearNode(this.countNode); + let textNode = document.createTextNode(`Showing 1 to ${limitNumber} of ${serialNumber} entries`); + this.countNode.appendChild(textNode); } _attachFunctionToClassNodes(className, eventName, functionName) { @@ -230,18 +238,18 @@ class DynamicTable { _addData(rowNode, serialNumber, dataArray, typeName, idSuffix) { let { addCheckboxes, checkboxClass } = this.paramObject; + if (addCheckboxes) { + let checkboxNode = this._getNode(`input`, { className: `form-control ${checkboxClass}`, id: `${checkboxClass}_${idSuffix}`, type: `checkbox` }); + let checkboxTDNode = this._getNode(typeName, { subNode: checkboxNode }); + rowNode.appendChild(checkboxTDNode); + } + let serialNumberNode = this._getNode(typeName, { text: serialNumber }); + rowNode.appendChild(serialNumberNode); let cellNode; dataArray.forEach(dataObject => { cellNode = this._getNode(typeName, dataObject); rowNode.appendChild(cellNode); }); - let serialNumberNode = this._getNode(typeName, { text: serialNumber }); - rowNode.insertBefore(serialNumberNode, rowNode.firstChild); - if (addCheckboxes) { - let checkboxNode = this._getNode(`input`, { className: `form-control ${checkboxClass}`, id: `${checkboxClass}_${idSuffix}`, type: `checkbox` }); - let checkboxTDNode = this._getNode(typeName, { subNode: checkboxNode }); - rowNode.insertBefore(checkboxTDNode, rowNode.firstChild); - } } _addToAttribute(currentElement, name, newText) {