Question

我使用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。我是新手。所以，如果可能的话，请告诉我在这方面需要包含的内容。

Answer 1

您可以通过多种方式创建随机颜色。

使用以下示例：

<强> 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时，在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/

上的其他示例

Answer 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()。

希望有所帮助。

将不同的颜色应用于动态生成的HTML表行

2 个答案: