Question

您好我尝试创建一个小代码，其中一个用户可以放入多少个表以及每个行应该具有哪些行和颜色。到目前为止，一切都在发挥作用。我设置变量并尝试将其放入标题中，但它只接受它作为文本而不是变量。我希望有人能告诉我我做错了什么。提前谢谢。

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

Answer 1

这是字符串连接的问题。您需要将df.empty变量连接到标题的True属性：

firstcolor

另外，您不应该使用bgcolor属性。相反，在var fheader = '<table border="1" bgcolor="'+firstcolor+'" \n';属性中使用CSS：

bgcolor

style

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

Answer 2

您可以使用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>

javascript更改生成的表中的颜色

2 个答案: