JavaScript изменить цвет в сгенерированной таблице - PullRequest
Новая
       13

JavaScript изменить цвет в сгенерированной таблице

0 голосов
/ 16 мая 2018

Привет! Я пытаюсь создать небольшой код, в котором можно указать, сколько таблиц и сколько строк и какой цвет должен иметь каждый. Пока все работает, кроме смены цвета. Я устанавливаю переменную и пытаюсь поместить это в заголовок, но он будет принимать это только как текст, а не как переменную. Я надеюсь, что кто-то может сказать мне, что я делаю неправильно. Заранее спасибо. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Table Form">
    <meta name="keywords" content="Modulor, Test, Frontend Development,      Table Form">
    <meta name="author" content="Shirin Doroudian">
    <title>Table Form</title>
    <link rel="stylesheet" type="text/css" href="style3.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <script type="text/javascript">
        function createTable() {
            var rowVar = document.getElementById('row').value;
            var columnVar = document.getElementById('column').value;
            var firstcolor =  document.getElementById('first-color').value;
            var fheader = '<table border="1" bgcolor = (firstcolor)>\n';

            var fbody = '';
            for( var i=0; i<rowVar;i++) {
                fbody += '<tr>';
                for( var j=0; j<columnVar;j++) {
                    fbody += '<td>';
                    fbody += '';
                    fbody += '</td>'
                }
                fbody += '</tr>\n';
            }

            var ffooter = '</table>';
            document.getElementById('table').innerHTML =  fheader +  fbody + ffooter ;
        }
    </script>
</head>

<body>
    <div id="container">
        <div id="left-side">
            <h1>Create your customized table!</h1>
            <form name="table" id="form">
                <div class="form-row">
                    <label class="form-label" for="row">Choose number of rows (2-10):</label>
                    <input type="number" min="2" max="10" name="row" id="row">
                </div>
                <div class="form-row">
                    <label class="form-label" for="column">Choose number of columns (2-10):</label>
                    <input type="number" min="2" max="10" name="column" id="column">
                </div>
                <div class="form-row">
                        <label class="form-label" for="first-color">Choose the first color:</label>
                        <input type="color" name="first-color" id="first-color" >
                    </div>
                    <div class="form-row">
                        <label class="form-label" for="second-color">Choose the second color:</label>
                        <input type="color" name="second-color" id="second-color" >
                    </div>
                <input name="generate" id="button-form" type="button" class="button form-row" value="Create Table!" onclick='createTable();'>
            </form>
        </div>
        <div id="right-side">
            <div id="table"></div>
        </div>
    </div>
</body>

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Вы можете использовать интерполяцию строк JavaScript (литералы шаблона), как показано ниже: 

var fheader = `<table border="1" bgcolor = ${firstcolor}>\n`;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Фрагмент рабочего кода 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Table Form">
    <meta name="keywords" content="Modulor, Test, Frontend Development,      Table Form">
    <meta name="author" content="Shirin Doroudian">
    <title>Table Form</title>
    <link rel="stylesheet" type="text/css" href="style3.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <script type="text/javascript">
        function createTable() {
            var rowVar = document.getElementById('row').value;
            var columnVar = document.getElementById('column').value;
            var firstcolor =  document.getElementById('first-color').value;
            var fheader = `<table border="1" bgcolor = ${firstcolor}>\n`;

            var fbody = '';
            for( var i=0; i<rowVar;i++) {
                fbody += '<tr>';
                for( var j=0; j<columnVar;j++) {
                    fbody += '<td>';
                    fbody += '';
                    fbody += '</td>'
                }
                fbody += '</tr>\n';
            }

            var ffooter = '</table>';
            document.getElementById('table').innerHTML =  fheader +  fbody + ffooter ;
        }
    </script>
</head>

<body>
    <div id="container">
        <div id="left-side">
            <h1>Create your customized table!</h1>
            <form name="table" id="form">
                <div class="form-row">
                    <label class="form-label" for="row">Choose number of rows (2-10):</label>
                    <input type="number" min="2" max="10" name="row" id="row">
                </div>
                <div class="form-row">
                    <label class="form-label" for="column">Choose number of columns (2-10):</label>
                    <input type="number" min="2" max="10" name="column" id="column">
                </div>
                <div class="form-row">
                        <label class="form-label" for="first-color">Choose the first color:</label>
                        <input type="color" name="first-color" id="first-color" >
                    </div>
                    <div class="form-row">
                        <label class="form-label" for="second-color">Choose the second color:</label>
                        <input type="color" name="second-color" id="second-color" >
                    </div>
                <input name="generate" id="button-form" type="button" class="button form-row" value="Create Table!" onclick='createTable();'>
            </form>
        </div>
        <div id="right-side">
            <div id="table"></div>
        </div>
    </div>
</body>
</html>
0 голосов
/ 16 мая 2018

Это вопрос конкатенации строк.Вам необходимо объединить вашу переменную firstcolor с атрибутом bgcolor вашего заголовка: 

var fheader = '<table border="1" bgcolor="'+firstcolor+'" \n';

В примечании, не следует использовать атрибут bgcolor.Вместо этого используйте CSS в атрибуте style: 

var fheader = '<table border="1" style="background-color:'+firstcolor+'" \n';


function createTable() {
    var rowVar = document.getElementById('row').value;
    var columnVar = document.getElementById('column').value;
    var firstcolor = document.getElementById('first-color').value;
    var fheader = '<table border="1" style="background-color:'+firstcolor+'" \n';

    var fbody = '';
    for (var i = 0; i < rowVar; i++) {
        fbody += '<tr>';
        for (var j = 0; j < columnVar; j++) {
            fbody += '<td>';
            fbody += '';
            fbody += '</td>'
        }
        fbody += '</tr>\n';
    }

    var ffooter = '</table>';
    document.getElementById('table').innerHTML = fheader + fbody + ffooter;
}
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta name="description" content="Table Form">
      <meta name="keywords" content="Modulor, Test, Frontend Development,      Table Form">
      <meta name="author" content="Shirin Doroudian">
      <title>Table Form</title>
      <link rel="stylesheet" type="text/css" href="style3.css">
      <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
   </head>
   <body>
      <div id="container">
         <div id="left-side">
            <h1>Create your customized table!</h1>
            <form name="table" id="form">
               <div class="form-row">
                  <label class="form-label" for="row">Choose number of rows (2-10):</label>
                  <input type="number" min="2" max="10" name="row" id="row">
               </div>
               <div class="form-row">
                  <label class="form-label" for="column">Choose number of columns (2-10):</label>
                  <input type="number" min="2" max="10" name="column" id="column">
               </div>
               <div class="form-row">
                  <label class="form-label" for="first-color">Choose the first color:</label>
                  <input type="color" name="first-color" id="first-color" >
               </div>
               <div class="form-row">
                  <label class="form-label" for="second-color">Choose the second color:</label>
                  <input type="color" name="second-color" id="second-color" >
               </div>
               <input name="generate" id="button-form" type="button" class="button form-row" value="Create Table!" onclick='createTable();'>
            </form>
         </div>
         <div id="right-side">
            <div id="table"></div>
         </div>
      </div>
   </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...