试图改组表格的列。
尝试了下面的代码,但完全没有改写。
我需要改组前四个选项。
window.onload = function() {
$("div.question_div").randomize("span.tdran");
};
(function($) {
$.fn.randomize = function(tree, childElem) {
return this.each(function() {
var $this = $(this);
if (tree) $this = $(this).find(tree);
var unsortedElems = $this.children(childElem);
var elems = unsortedElems.clone();
elems.sort(function() {
return (Math.round(Math.random()) - 0.5);
});
for (var i = 0; i < elems.length; i++)
unsortedElems.eq(i).replaceWith(elems[i]);
});
};
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Question 3
<div class="question_div">
<table>
<tr>
<td colspan="4">
<p>In a camp, there is a meal for 200 children or 120 men. If 150 children have taken the meal, how many men will be served with the remaining meal?</p>
</td>
</tr>
<tr>
<span class="tdran">
<td><input type="radio" name="radio3" id="checka3" value="A"></td>
<td><label for="checka3">
<p>31</p>
</label></td>
</span>
<span class="tdran">
<td><input type="radio" name="radio3" id="checkb3" value="B"></td>
<td><label for="checkb3">
<p>30</p>
</label></td>
</span>
</tr>
<tr>
<span class="tdran">
<td><input type="radio" name="radio3" id="checkc3" value="C"></td>
<td><label for="checkc3">
<p>29</p>
</label></td>
</span>
<span class="tdran">
<td><input type="radio" name="radio3" id="checkd3" value="D"></td>
<td><label for="checkd3">
<p>35</p>
</label></td>
</span>
</tr>
<tr>
<td><input type="radio" name="radio3" id="checke3" value="E"></td>
<td><label for="checke3">
<p>None of these</p>
</label></td>
</tr>
</table>
</div>
<hr>
</br>
试图改组表格的列。
尝试了下面的代码,但完全没有改写。
我需要改组前四个选项。
我是否可以得到一个补充说明,如何删除两个选项之间以及单选按钮和值之间的空格?
您的HTML标记无效-无法将<td>
与<span>
换行,<tr>
的唯一允许子元素是<td>
。尽管可以随机更改表格单元格的顺序,但我建议改用<div>
,因为它容易得多。
window.onload = function() {
randomize();
};
function randomize() {
let questions = $(".question_div");
let divCollection = questions.find(".ran");
let divs = Array.from(divCollection);
shuffleArray(divs);
for (const div of divs) {
questions.append(div);
}
}
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
label {
display: inline-block;
margin-left: 5px;
}
.ran {
float: left;
width: 200px;
}
div:nth-child(even) {
clear: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Question 3
<div class="question_div">
<p>In a camp, there is a meal for 200 children or 120 men. If 150 children have taken the meal, how many men will be served with the remaining meal?</p>
<div class="ran">
<input type="radio" name="radio3" id="checka3" value="A">
<label for="checka3">
<p>31</p>
</label>
</div>
<div class="ran"><input type="radio" name="radio3" id="checkb3" value="B"><label for="checkb3">
<p>30</p>
</label>
</div>
<div class="ran"><input type="radio" name="radio3" id="checkc3" value="C"><label for="checkc3">
<p>29</p>
</label>
</div>
<div class="ran"><input type="radio" name="radio3" id="checkd3" value="D"><label for="checkd3">
<p>35</p>
</label>
</div>
<div class="ran"><input type="radio" name="radio3" id="checke3" value="E"><label for="checke3">
<p>None of these</p>
</label>
</div>
</div>
要在列之间获得更大的距离,只需增加类.ran
中的宽度。工作Fiddle。我用这个答案作为答案:Javascript: Shuffle table rows