格式化動態表中的JavaScript

我有以下動態表：格式化動態表中的JavaScript

dtable = "<table style='background-color:purple;'><tr><td style='width: 100px; color: red;'> Start </td>"; 
dtable += "<td style='width: 100px; color: red; text-align: right;'> Name </td></tr>"; 
dtable += "<tr><td style='width: 100px;'>" + Data["start"] + "</td>"; 
dtable += "<td style='width: 100px; text-align: right;'>" + Data["name"] + "</td></tr>"; 

dtable += "<tr><td  style='width: 100px; text-align: right;'></td>"; 
dtable += "<td  style='width: 100px; text-align: right;'></td></tr>"; 

dtable += "<tr><td style='width: 100px; color: red;'> Status </td>"; 
dtable += "<td style='width: 100px; color: red; text-align: right;'> ID </td></tr>"; 
dtable += "<tr><td style='width: 100px;'>" + Data["status"] + "</td>"; 
dtable += "<td style='width: 100px; text-align: right;'>" + Data["ID"] + "</td></tr>"; 

dtable += "<tr><td  style='width: 100px; text-align: right;'></td>"; 
dtable += "<td  style='width: 100px; text-align: right;'></td></tr>"; 

dtable += "<tr><td style='width: 100px; color: red;'> Title</td>";

的顯示將是在第一列中包含開始和名稱兩列如列和第二列包含狀態和ID。

我想把第一列的邊框和第二列的邊框也放在一起。

我不能使用任何其他功能，如jQuery的計算和放置左邊和右邊的列的邊界，因爲這只是一個動態內容。

上表是否有任何改動來對它們進行分組和設置邊界？我基本上點擊一個按鈕，然後點擊建立此表並顯示。 editted：dtable錯字

來源

2015-12-09 Jquery Developer

是'dcontent'裏面有錯字嗎？ – Jamiec

dcontent只是「var」 –

我不知道這意味着什麼 - 但它很奇怪，你將一個大的長字符串連接到'dtable'中，並且通過你將一個單元格放入'dcontent'中。 – Jamiec

-1

看看這個鏈接。它使用CSS來實現列上交替的顏色。它可能有幫助。 http://www.textfixer.com/tutorials/css-table-color-columns.php

來源

2015-12-09 16:42:54 Bindrid

Bindird請在question.pls中添加必要的答案部分，不僅僅是發佈鏈接。 –

這對我有效。交替使用邊框顏色和背景顏色。

<html> 
    <script> 
      function init(){ 
      var Data= {name:'bin', ID:7, status:'good', start:'today'} 
      dtable = "<table class='TFtableCol' style='background-color:purple;'><tr><td style='width: 100px; color: red;'> Start </td>"; 
    dtable += "<td style='width: 100px; color: red; text-align: right;'> Name </td></tr>"; 
    dtable += "<tr><td style='width: 100px;'>" + Data["start"] + "</td>"; 
    dtable += "<td style='width: 100px; text-align: right;'>" + Data["name"] + "</td></tr>"; 

    dtable += "<tr><td  style='width: 100px; text-align: right;'></td>"; 
    dtable += "<td  style='width: 100px; text-align: right;'></td></tr>"; 

    dtable += "<tr><td style='width: 100px; color: red;'> Status </td>"; 
    dtable += "<td style='width: 100px; color: red; text-align: right;'> ID </td></tr>"; 
    dtable += "<tr><td style='width: 100px;'>" + Data["status"] + "</td>"; 
    dtable += "<td style='width: 100px; text-align: right;'>" + Data["ID"] + "</td></tr>"; 

    dtable += "<tr><td  style='width: 100px; text-align: right;'></td>"; 
    dtable += "<td  style='width: 100px; text-align: right;'></td></tr>"; 
    dtable +="</table>" 
    //dtable += "<tr><td style='width: 100px; color: red;'> Title</td>"; 
    document.getElementById("d").innerHTML = dtable; 
    } 
      </script> 
    <body onload='init()'> 


    <style type="text/css"> 
     .TFtableCol{ 
      width:100%; 
      border-collapse:collapse; 
     } 
     .TFtableCol td{ 
      padding:7px; border:2px solid; 
     } 
     /* improve visual readability for IE8 and below */ 
     .TFtableCol tr{ 
      background: #b8d1f3; 
     } 
     /* Define the background color for all the ODD table columns */ 
     .TFtableCol tr td:nth-child(odd){ 
      background: #b8d1f3; 
      border-color:Red; 
     } 
     /* Define the background color for all the EVEN table columns */ 
     .TFtableCol tr td:nth-child(even){ 
      background: #dae5f4; 
      border-color:green; 
     } 
    </style> 


    <form> 
     <div id='d' style='width:600px'></div> 
    </form> 
    </body> 
</html>

來源

2015-12-09 17:45:14 Bindrid

格式化動態表中的JavaScript

回答

相關問題