javascript - table td單元格生成tr問題
問題描述
假設現在有10個td的json對象,td的colspan屬性值取1-3, 現在要把它們變成td放到tr中. td的colspan為1時,tr里放3個td,colspan為2時,tr里放兩個td.colspan為3時,tr里放3個td. 怎么做到?
問題解答
回答1:<tr ng-if='$scope.colspan === 1'> <td></td> <td></td> <td></td></tr><tr ng-if='$scope.colspan === 2'> <td></td> <td></td></tr><tr ng-if='$scope.colspan === 3'> <td></td> <td></td> <td></td></tr>
用angular>ng-if解決
回答2:隨便猜了下你的想法。。
var json = [{ colspan: 1, title: 1}, { colspan: 2, title: 2}, { colspan: 3, title: 3}]document.body.innerHTML = ’<table>’+ generateTr(json) +’</table>’function generateTr(json) { var tr = [] for (var i = 0, l = json.length; i < l; i++) {var item = json[i], tds = []for (var j = 0, k = Math.ceil(3 / item.colspan); j < k; j++) { tds.push(’<td’ + (j == 0 ? ’ colspan='’ + item.colspan+’'’ : ’’) + ’>’ + item.title + ’</td>’)}tr.push(’<tr>’ + tds.join(’’) + ’</tr>’) } return tr.join(’’)}
相關文章:
1. javascript - vue提示語法錯誤,請問錯誤在哪?2. css3 - border-bottom 的長度可否超過盒子的寬度呢?實現如下圖效果。(我的書下面的線)3. 淺談vue生命周期共有幾個階段?分別是什么?4. index.php錯誤,求指點5. java - web端百度網盤的一個操作為什么要分兩次請求服務器, 有什么好處嗎6. javascript - vue.js如何遞歸渲染組件.7. css - 移動端 oppo 手機之 Border-radius8. css - 關于偽類背景問題9. html - JavaScript的Dom操作如何改變子元素的文本內容10. javascript - 為什么我的animation-fill-mode 設置不生效
