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

Question

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

＆＃13;

＆＃13;

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);
};

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用things.splice(thing,1)代替访问数组元素，你可以很好地改变它 - 参见下面的演示：

＆＃13;

＆＃13;

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);
};

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

执行此操作的一种方法是使用唯一的things数组。这可以通过在数组上使用filter函数并传入一个检查唯一性的谓词来完成。

let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;
list.item(index).innerHTML = uniqueThings[index];

完整代码：

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);
              let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;   
              list.item(index).innerHTML = uniqueThings[index];
            }
		}, 500);
	};
    

		

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>