Как я могу установить альтернативный цвет для строк и столбцов, используя javascript в html? - PullRequest
Новая
       1

Как я могу установить альтернативный цвет для строк и столбцов, используя javascript в html?

1 голос
/ 18 марта 2020

Я создаю таблицу по пользовательским данным. Пользователь введет высоту (количество строк) и ширину (количество столбцов) и создаст таблицу. После создания таблицы я хочу отформатировать строку и столбец в моей таблице. Я хочу применить альтернативные цвета для строк и столбцов.

Вот мой код: 

 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 |

1 Ответ

0 голосов
/ 18 марта 2020

Поскольку вы сказали, что используете table, вы можете использовать что-то вроде этого: 

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

, если вы ищете столбцы и строки затем:

используйте css для td, если вы хотите другой цветовой код для columns

используйте css для tr, если вы хотите другой цветовой код для rows 

<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>

CSS

  $(document).ready(function () {
  $("table#id2 td:even").css("background-color", "LightGray");
  $("table#id2 tr:even").css("background-color", "LightBlue");
  $("table#id2 tr:odd td").css("background-color", "LightYellow");
  });

Скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...