如何在html中使用javascript为行和列设置备用颜色？_Javascript_Html_Css_Styles

如何在html中使用javascript为行和列设置备用颜色？

javascript html css

如何在html中使用javascript为行和列设置备用颜色？,javascript,html,css,styles,Javascript,Html,Css,Styles,我正在通过用户输入创建一个表。用户将输入高度（行数）和宽度（列数），然后创建表格。创建表后，我想格式化表中的行和列。我想为行和列应用替代颜色。这是我的代码： function createGrid() { var num_rows = document.getElementById('row').value; var num_cols = document.getElementById('col').value; var theader = '<table id="t

我正在通过用户输入创建一个表。用户将输入高度（行数）和宽度（列数），然后创建表格。创建表后，我想格式化表中的行和列。我想为行和列应用替代颜色。

这是我的代码：

 function createGrid()
 {
 var num_rows = document.getElementById('row').value;
 var num_cols = document.getElementById('col').value;
 var theader = 
 '<table id="tblMain" border="1" >\n';
 var tbody = '';

 for( var i=0; i<num_rows;i++)
 {
     tbody += '<tr>';
     for( var j=0; j<num_cols;j++)
     {
         tbody += '<td>';
         tbody += 'Cell ' + i + ',' + j;
         tbody += '</td>';
     }
     tbody += '</tr>\n';
 }
 var tfooter = '</table>';
 document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;

  }

   </script>
   <style>
   td{
    background: yellow;
  }

 tr td:nth-child(even) {
 background-color: red;
   }
 } 
 </style>

 <body>
 <form name="tablegen">
 <label>Width: <input type="text" name="col" id="col"/></label><br/>
 <label>Height: <input type="text" name="row" id="row"/></label><br />
 <input name="generate" type="button" value="Create Table!" onclick='createGrid();'/>
 </form>
 <div id="wrapper"></div>```


 **I want my table in the folowing format(Red and green are the colors for the rows and columns):**

 |Red    |   Green  |    Red     |   Green |
 |Green  |   Red    |   Green    |   Red   |
 |Red    |   Green  |    Red     |   Green |

函数createGrid（） { var num_rows=document.getElementById（'row'）.value； var num_cols=document.getElementById（'col'）.value；变量theader= “\n”； var tbody=''；

对于（var i=0；i既然您说您正在使用

表

，那么您可以使用如下内容：

$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");

如果要查找列和行，则：

如果您想为

列使用不同的颜色代码，请将css用于td

如果您希望对行使用不同的颜色代码，请对tr
使用css
<table id="id2" border="1">
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>

既然您说您正在使用表格
，您可以使用以下内容：
$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");

如果要查找列和行，则：
如果您想为列使用不同的颜色代码，请将css用于td

如果您希望对行使用不同的颜色代码，请对tr
使用css
<table id="id2" border="1">
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>

事实上，我想为每一行和每一列添加备用颜色。如果我使用您的代码，它将为整行或整列添加颜色。是的，也添加了该颜色，请选中fiddle，随意更改内容。@user2495答案是否有帮助，或者至少它帮助您前进了？我无法做到。我没有理解，代码工作正常，而且也可以使用fiddle！事实上，我想为每一行和每一列添加替代颜色。如果我使用您的代码，它将为整行或整列添加颜色。是的，还添加了该选项，请选中fiddle，随意更改内容。@user2495的答案是否有帮助，或者至少它帮助您前进了一步？我无法做到。我没有得到它，代码工作正常，而且也可以使用fiddle！