2

我已经使用 HTML 和 javascript 创建了动态表，但我不想应用替代颜色，而是想对每一行应用不同的颜色。我该怎么做？

<!DOCTYPE HTML>
<html>
    <head>
        <title>Dynamic Page</title>
    </head>


    <body>
        <table>
            <tr>
                <td>Enter Rows</td>
                <td><input type="number" id="txtRows"/></td>
            </tr>
            <tr>
                <td>Enter Columns</td>
                <td><input type="number" id="txtCols"/></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" id="btnDisplay" value="Display" onClick="createTable();"/></td>
            </tr>
        </table>
        <table id="tbl_DynamicTable" border="1">
        </table>
    </body>

    <script type="text/javascript">
        function createTable()
        {
          debugger;
            var rows = document.getElementById("txtRows").value;
            var cols = document.getElementById("txtCols").value;
            var table = document.getElementById("tbl_DynamicTable");
            var str="";
            for(var i=0;i<rows;i++)
            {
                str += "<tr id=row" + i +">";

                //r = document.getElementById('tbl_DynamicTable').getElementsByTagName('<tr>');
                //r.bgColor = colours[(i%k)/group | 0];

                //mycurrent_row.style.backgroundColor = "#EEF4EA";
                //mycurrent_row.style.backgroundColor =colours[(i%k)/group | 0];

                for(var j=0;j<cols;j++)
                {
                    if(i==0)
                    {
                        str += "<th> Header " + j + "</th>";
                    }
                    else
                    {
                        str += "<td> Row " + i + ", Cell "+ j + "</td>";
                    }
                }
                str += "</tr>";             
            }           
            table.innerHTML = str;
        }       


        $("tr").style("bgcolor","red");     
    </script>
</html>

我不知道如何在 HTML 页面中使用 jQuery。我是新手。因此，如果可能的话，请让我知道还需要包含哪些内容。

4

2 回答 2

4

您有很多方法可以创建随机颜色。

使用这些示例：

JAVASCRIPT

'#'+Math.floor(Math.random()*16777215).toString(16);

jQuery

(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
  s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)

并在你生成它时在你的 TR 上添加这个六边形随机颜色

HTML

<table border="1">
  <tr bgcolor="#FF0000">
                  ^ Here
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

http://www.paulirish.com/2009/random-hex-color-code-snippets/上的其他示例

于 2013-10-21T07:38:58.680 回答
2

javascript方法（我建议包括jQuery）：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

// paint rows on document ready
$(function(){
    paint_rows();
});

function paint_rows() {
    $('#table_id tr').each(function(){
            $(this).css('color', get_random_color());
    });
}
</script>

只需确保在数组中添加足够的颜色值colors（也可以使用十六进制值）。

paint_rows()而且，您当然可以在需要时调用该函数。

希望有帮助。

于 2013-10-21T07:37:33.217 回答