javascript - 为每个表格单元格随机分配不同的名称

Question

所以我有一个程序，它通过单击按钮从文本框中的名称列表中随机为表格第一行中的每个单元格分配一个名称，我想做的是为每个单元格分配不同的名称单击按钮时文本框中的单元格的数量，以便没有两个单元格具有相同的名称，到目前为止，这是我的代码:

var rnd = function() {
  var things;
  things = document.getElementById('things').value;
  things = things.replace(', ', ',');
  things = things.split(',');
  setTimeout(function() {
    var list = document.querySelectorAll('.js-result');

    for (var index = 0; index < list.length; index++) {
      var thing = Math.floor(Math.random() * things.length);
      list.item(index).innerHTML = things[thing];
    }
  }, 500);
};

fieldset input {
  display: block;
}
.result {
  border: solid 1px black;
  background: #e0e0e0;
  padding: 1em;
  margin: 1em 0;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 75%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  text-align: center
}
tr:nth-child(even) {
  background-color: #dddddd;
}

<table align="center">
  <thead>
    <tr>
      <th></th>
      <th>Black</th>
      <th>Blue</th>
      <th>B &amp; B</th>
      <th>Gold</th>
      <th>Green</th>
      <th>Gryphons</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <form method="get" action="/" onsubmit="return false;">
          <fieldset>
            <label>
              <textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
            </label>
          </fieldset>
          <p>
            <input type="button" value="Pick one!" onclick="rnd();">
          </p>
        </form>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用 things.splice(thing,1) 很好地改变它，而不是访问数组元素 - 请参见下面的演示:

var rnd = function() {
  var things;
  things = document.getElementById('things').value;
  things = things.replace(', ', ',');
  things = things.split(',');
  setTimeout(function() {
    var list = document.querySelectorAll('.js-result');

    for (var index = 0; index < list.length; index++) {
      var thing = Math.floor(Math.random() * things.length);
      list.item(index).innerHTML = things.splice(thing,1);
    }
  }, 500);
};

fieldset input {
  display: block;
}
.result {
  border: solid 1px black;
  background: #e0e0e0;
  padding: 1em;
  margin: 1em 0;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 75%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  text-align: center
}
tr:nth-child(even) {
  background-color: #dddddd;
}

<table align="center">
  <thead>
    <tr>
      <th></th>
      <th>Black</th>
      <th>Blue</th>
      <th>B &amp; B</th>
      <th>Gold</th>
      <th>Green</th>
      <th>Gryphons</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <form method="get" action="/" onsubmit="return false;">
          <fieldset>
            <label>
              <textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
            </label>
          </fieldset>
          <p>
            <input type="button" value="Pick one!" onclick="rnd();">
          </p>
        </form>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
      <td>
        <div class="js-result result"></div>
      </td>
    </tr>
  </tbody>
</table>