创建 table 时无法更改变量

Question

人！请帮助。

我有一个表格 select。我需要 - 如果我得到一个值 - 组织 1，我想创建一个 table（形式后的代码 - 函数 getAttr()）并更改变量 bigBoss、gap 和sme 从 0 到 var bigBoss = "Steve"、var gap = "Mary"、var sme = "Anastasia"。我需要用这些名称创建一个 table，但是如果我使用 organization 2，我需要 bigBoss、gap 和 sme 将是 James , Richard 和 Mike。

我该怎么做？帮助。

<div class = "nameOfOrganization">
<label>2. Choose organization:</label>

<form>
<select name = "organizations" id="organizations" style="text-transform:   uppercase; width: 312px;">
<option>organization 1</option>
<option>organization 2</option>
<option>organization 3</option>
</select>
</form>
<button type="button" onclick="getOrganizationName()">Add to document:      </button>

<script>

function getOrganizationName () {
var x = document.getElementById("organizations");
var y = x.options[x.selectedIndex].text;

document.getElementById("organizationName").innerHTML = y;

getAttr(); // add a table with bigBoss, gap and sme

}
</script>
<script>

function getAttr() {
var bigBoss = 0 ;
var gap = 0;
var sme = 0;

var podpisi = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
var position = document.createTextNode('Boss');
tr.appendChild(td);
td.appendChild(position);
var td1 = document.createElement('td');
var signature = document.createTextNode(" " + '_____________');
tr.appendChild(td1);
td1.appendChild(signature);
var td2 = document.createElement('td');
var bigBoss_surname_Name_MiddleName = document.createTextNode(bigBoss);
tr.appendChild(td2);
td2.appendChild(bigBoss_surname_Name_MiddleName);
podpisi.appendChild(tr);
podpisi.id="podpisi";
td.className = "td1";
td1.className = "td2";
td2.className = "td3";


var tr2 = document.createElement('tr');
var td2_1 = document.createElement('td');
var position1 = document.createTextNode('Кошторис перевірив');
tr2.appendChild(td2_1);
td2_1.appendChild(position1);
var td2_2 = document.createElement('td');
var signature1 = document.createTextNode(" " + '_____________');
tr2.appendChild(td2_2);
td2_2.appendChild(signature1);
var td2_3 = document.createElement('td');
var GAP_surname_Name_MiddleName = document.createTextNode(gap);
tr2.appendChild(td2_3);
td2_3.appendChild(GAP_surname_Name_MiddleName);
podpisi.appendChild(tr2);
td2_1.className = "td1";
td2_2.className = "td2";
td2_3.className = "td3";



var tr3 = document.createElement('tr');
var td3_1 = document.createElement('td');
var position2 = document.createTextNode('Кошторис cклав:');
tr3.appendChild(td3_1);
td3_1.appendChild(position2);
var td3_2 = document.createElement('td');
var signature2 = document.createTextNode(" " + '_____________');
tr3.appendChild(td3_2);
td3_2.appendChild(signature2);
var td3_3 = document.createElement('td');
var smetchik_surname_Name_MiddleName = document.createTextNode(sme);
tr3.appendChild(td3_3);
td3_3.appendChild(smetchik_surname_Name_MiddleName);
podpisi.appendChild(tr3);
td3_1.className = "td1";
td3_2.className = "td2";
td3_3.className = "td3";

Answer 1

试试这个：

<select name = "organizations" id="organizations" style="text-transform:   uppercase; width: 312px;">
<option data-bigBoss="Steve" data-gap="Mary" data-sme="Anastasia">organization 1</option>
<option data-bigBoss="James" data-gap="Richard" data-sme="Mike">organization 2</option>
<option data-bigBoss="Someone" data-gap="Another one" data-sme="Somebody">organization 3</option>
</select>

并且在您的 getAttr 方法的开头更改为：

var x = document.getElementById("organizations");
var y = x.options[x.selectedIndex];
var bigBoss = y.getAttribute("data-bigBoss");
var gap = y.getAttribute("data-gap");
var sme = y.getAttribute("data-sme");

there is a sample

Answer 2

给你：

<div class="nameOfOrganization">
    <label>2. Choose organization:</label>

    <form>
        <select name="organizations" id="organizations" style="text-transform:   uppercase; width: 312px;">
            <option value="0">organization 1</option>
            <option value="1">organization 2</option>
            <option value="2">organization 3</option>
        </select>

        <div id="organizationName"></div>

    </form>
    <button type="button" onclick="getOrganizationName()">Add to document: </button>

    <script>
        var names = [{
            bigBoss: 'Steve',
            gap: 'Mary',
            sme: 'Anastasia'
        }, {
            bigBoss: 'John',
            gap: 'Jane',
            sme: 'JJ'
        }, {
            bigBoss: 'Amy',
            gap: 'Adam',
            sme: 'AJ'
        }];

        function getOrganizationName() {
            var x = document.getElementById("organizations");
            var y = x.options[x.selectedIndex].text;

            document.getElementById("organizationName").innerHTML = y;

            getAttr(+x.options[x.selectedIndex].value); // add a table with bigBoss, gap and sme

        }
    </script>
    <script>
        function getAttr(idx) {
            var bigBoss = 0;
            var gap = 0;
            var sme = 0;

            var podpisi = document.createElement('table');
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var position = document.createTextNode('Boss');
            tr.appendChild(td);
            td.appendChild(position);
            var td1 = document.createElement('td');
            var signature = document.createTextNode(names[idx].bigBoss);
            tr.appendChild(td1);
            td1.appendChild(signature);
            var td2 = document.createElement('td');
            var bigBoss_surname_Name_MiddleName = document.createTextNode(bigBoss);
            tr.appendChild(td2);
            td2.appendChild(bigBoss_surname_Name_MiddleName);
            podpisi.appendChild(tr);
            podpisi.id = "podpisi";
            td.className = "td1";
            td1.className = "td2";
            td2.className = "td3";


            var tr2 = document.createElement('tr');
            var td2_1 = document.createElement('td');
            var position1 = document.createTextNode('Кошторис перевірив');
            tr2.appendChild(td2_1);
            td2_1.appendChild(position1);
            var td2_2 = document.createElement('td');
            var signature1 = document.createTextNode(names[idx].gap);
            tr2.appendChild(td2_2);
            td2_2.appendChild(signature1);
            var td2_3 = document.createElement('td');
            var GAP_surname_Name_MiddleName = document.createTextNode(gap);
            tr2.appendChild(td2_3);
            td2_3.appendChild(GAP_surname_Name_MiddleName);
            podpisi.appendChild(tr2);
            td2_1.className = "td1";
            td2_2.className = "td2";
            td2_3.className = "td3";



            var tr3 = document.createElement('tr');
            var td3_1 = document.createElement('td');
            var position2 = document.createTextNode('Кошторис cклав:');
            tr3.appendChild(td3_1);
            td3_1.appendChild(position2);
            var td3_2 = document.createElement('td');
            var signature2 = document.createTextNode(names[idx].sme);
            tr3.appendChild(td3_2);
            td3_2.appendChild(signature2);
            var td3_3 = document.createElement('td');
            var smetchik_surname_Name_MiddleName = document.createTextNode(sme);
            tr3.appendChild(td3_3);
            td3_3.appendChild(smetchik_surname_Name_MiddleName);
            podpisi.appendChild(tr3);
            td3_1.className = "td1";
            td3_2.className = "td2";
            td3_3.className = "td3";

            var div = document.getElementById("organizationName");
            div.appendChild(podpisi);
        }
    </script>

我添加了这个，因为你似乎没有任何与此 ID 相关的内容：

    <div id="organizationName"></div>

我想我只是创建了某种数组来存储您需要的名称：

 var names = [{
                bigBoss: 'Steve',
                gap: 'Mary',
                sme: 'Anastasia'
            }, {
                bigBoss: 'John',
                gap: 'Jane',
                sme: 'JJ'
            }, {
                bigBoss: 'Amy',
                gap: 'Adam',
                sme: 'AJ'
            }];

这两行将实际的 table 添加到您的 html 正文中：

        var div = document.getElementById("organizationName");
        div.appendChild(podpisi);

创建 table 时无法更改变量

Can't change a variable when I'm creating a table

javascript

variables

option