javascript - 逐行随机分配输入到文本框中的值

标签 javascript jquery html css

我已经创建了一些代码，可以从文本框中输入的事物列表中随机选择一个事物，我还能够获得将其输入到表格的第一个单元格中的代码，这是我现在想要的要做的是将文本框中输入的所有内容分配到行的每个单元格中，这是我的代码:

	var rnd = function () {
		var loader, things;
		loader = document.getElementById('ajax-loader');
		loader.style.display = 'inline';
		things = document.getElementById('things').value;
		things = things.replace(', ', ',');
		things = things.split(',');
		setTimeout(function () {
			var thing;
			loader.style.display = 'none';
			thing = Math.floor(Math.random() * things.length);
			document.getElementById('result').innerHTML = things[thing];
		}, 500);
	};
	
	// a little functionality for erin foley...

	// save the things the user entered
	document.getElementById('things').addEventListener('blur', function ( evt ) {
		window.localStorage['things-to-be-picked'] = this.value
	})

	// use the user’s saved things
	document.addEventListener('DOMContentLoaded', function ( evt ) {
		var things = window.localStorage['things-to-be-picked']
		if ( things ) {
			document.getElementById('things').value = things
		}
	})
	fieldset input {
		display: block;
	}
	#result {
		border: solid 1px black;
		background: #e0e0e0;
		padding: 1em;
		margin: 1em 0;
	}
	#ajax-loader {
		display: none;
		margin-bottom: -4px;
	}

	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;
	}
<!DOCTYPE html>
    <html>
      <body>
<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();">
			<img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking...">
		</p>
	</form>
</td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
<td><div id="result"></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

编辑:即使错误显示代码段仍然有效。

下面是一些代码，完全符合我希望上面的代码片段执行的操作:

var round1 = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
var round2 = ['Cyril Willard', 'Gale Frank', 'Aveline Derricks', 'Darcey Bullock', 'Jaiden Deering', 'Glenn Benn'];
var round3 = ['George Washington', 'John Adams', 'Tom Jefferson', 'James Madison', 'James Monroe', 'John Quincy Adams'];
/* game is a multidimensional array. 
|  Each element is an array(sub-array).
|  Each sub-array is a row in a table.
|  Each element of a sub-array is a cell.
*/
var game = [round1, round2, round3];
// count will be incremented per click of button
var count = 0;

function rounds(n, obj) {
  
// Determine which sub-array to use
var array = obj[n - 1];
  
// Determine the specific <tr>
var row = 'tr:nth-of-type(' + n + ')';
 
// Reference each <td> cell of the <tr> row
var cells = document.querySelectorAll('tbody ' + row + ' td');
  
// Cell count
var x = 0;
  
// Separate each element of sub-array
array = array.slice(0);
  
// while loop establishes limits and iteration
while (array.length > 0 && x < cells.length) {

// Get a randomly generated number 
var randomIndex = Math.floor(Math.random() * array.length);

/* On each iteration...
|  ...insert the element of sub-array...
|  ...that was determined by a randomly...
|  ...generated index number.
*/
cells[x].innerHTML = array[randomIndex];

// Increment cell count
x++;

// Join all of the cells together in it's new order
array.splice(randomIndex, 1);
}
 }
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;
}
     <!DOCTYPE html>
         <html>
         <body>
<table id="example" class="display" align=center>
<thead>
  <tr>
    <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></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
 </tbody>
</table>

<div style="padding:25px" align=center>
<!-- This button's attribute event has a incremental counter, so each successive click will change the count parameter -->
<button type="button" onclick="count++;rounds(count, game)">Simulate to next round</button>

</div>
 </body>
            </html>

最佳答案

您的 html 中有多个具有相同 ID 的元素，需要更改这些元素。您可以为所有 div 提供类结果，并可以像下面的示例一样使用函数 getDiv() 来获取下一个空 div。

var getDiv = function(){
  
  var optionCount = document.getElementsByClassName('result');
  var rightDiv = null;
  for(var i = 0; i < optionCount.length; i++)
  {
    if(document.getElementsByClassName('result')[i].childNodes.length == 0)
    {
      rightDiv = document.getElementsByClassName('result')[i];
      break;
    }
  }
  
  return rightDiv;
  
}

var rnd = function () {
		var loader, things;
		loader = document.getElementById('ajax-loader');
		loader.style.display = 'inline';
		things = document.getElementById('things').value;
		things = things.replace(', ', ',');
		things = things.split(',');
		setTimeout(function () {
			var thing;
			loader.style.display = 'none';
			thing = Math.floor(Math.random() * things.length);
            var elem = getDiv();
            if(elem !== null)
			elem.innerHTML = things[thing];
		}, 500);
	};
	
	// a little functionality for erin foley...

	// save the things the user entered
	document.getElementById('things').addEventListener('blur', function ( evt ) {
		window.localStorage['things-to-be-picked'] = this.value
	})

	// use the user’s saved things
	document.addEventListener('DOMContentLoaded', function ( evt ) {
		var things = "";//window.localStorage['things-to-be-picked']
		if ( things ) {
			document.getElementById('things').value = things
		}
	})
fieldset input {
		display: block;
	}
	#result {
		border: solid 1px black;
		background: #e0e0e0;
		padding: 1em;
		margin: 1em 0;
	}
	#ajax-loader {
		display: none;
		margin-bottom: -4px;
	}

	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;
	}
<!DOCTYPE html>
    <html>
      <body>
<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();">
			<img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking...">
		</p>
	</form>
</td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
<td><div class="result"></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

关于javascript - 逐行随机分配输入到文本框中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41417215/

上一篇：html - 用文本制作 bootstrap header

下一篇：javascript - 如何使用html在对话框弹出窗口中添加iframe元素标签

相关文章：

javascript - Jquery 行切换类独立表

php - jQuery $.post() 函数难以不显示结果？

jquery - Internet Explorer : Bad visualization of CSS Table (table-row, 表格单元格)

javascript - 包含至少 3 个以下 [0-9]、[a-z]、[A-Z] 或特殊字符($ 除外)的正则表达式

javascript - 在导航栏上实现 Bootstrap 的 affix-top 功能的最佳方法

javascript - jQuery:使 div 可点击以检查嵌套的复选框

javascript - 修复了导航栏在回发时消失的问题

javascript - 是否有一个函数可以获取数字数组并返回范围？

javascript - 重定向到另一个 HTML 页面在 Javascript 表单提交事件监听器中不起作用

javascript - 重置间隔计时器不起作用!怎么了？

©2024 IT工具网  联系我们