The above is the title, and the following is the first question of the code written by me and my friends: 1⃣️
<script>
const arr = [
[1, 2, 33, 5],
[2, 10, 15, 16],
[3, 1, 21, 20]
];
function domDrow (arr) {
var newArray = arr[0].map(function(col, i) { // 将数组行列转换
return arr.map(function(row) {
return row[i];
})
});
var maxArr = newArray.map(Function.apply.bind(Math.max, null)); // 取得每列最大
var _arr = arr;
var html = '';
for (var i in _arr) {
html += '<tr>'
for (var j in _arr[i]) {
//console.log(newArray[j][i])
//console.log(maxArr[j])
if (newArray[j][i] == maxArr[j]) {
html += '<td class="active">' + _arr[i][j] + '</td>'
}else {
html += '<td>' + _arr[i][j] + '</td>'
}
}
html += '</tr>'
}
document.getElementById('tab').innerHTML = html;
}
domDrow(arr);
</script>
2⃣️
var arr = [
[1, 2, 33, 5],
[2, 10, 15, 16],
[3, 1, 21, 20]
]
function tableArr(arr){
var arr = arr
var table = document.getElementById('table')
var html = ''
for(var item in arr){
html += '<tr>'
for(var i = 0 ;arr[item].length>i;i++){
var one = 0;
var two = 0;
for(var j = 0;arr.length>j;j++){
two = arr[j][i]
if(two>one){
one = two
}else{
two = one
}
}
if(arr[item][i] == two){
html +='<td class="strong">'+arr[item][i]+'</td>'
}else{
html +='<td>'+arr[item][i]+'</td>'
}
}
html += '</tr>'
}
table.innerHTML = html
}
tableArr(arr);
Question 2: jq 1⃣️
<body>
<div id="app">
<h1></h1>
<select name="arr1">
<option value="0">--请选择--</option>
</select>
<select name="arr2">
<option value="0">--请选择--</option>
</select>
<select name="arr3">
<option value="0">--请选择--</option>
</select>
</div>
</body>
</html>
<script>
$(function () {
var s1 = $("select[name='arr1']");
var s2 = $("select[name='arr2']");
var s3 = $("select[name='arr3']");
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var html = ''
for (var i = 0; i < arr.length; i++) {
html += '<option value="'+ arr[i] +'">' + arr[i] + '</option>'
};
s1.append(html);
s2.append(html);
s3.append(html);
s1.on("change",function () {
var val = $(this).val();
console.log(val);
s1.find("option").removeClass("none"); // 先还原所有的
s2.find("option[value='"+ val +"']").addClass("none")
s3.find("option[value='"+ val +"']").addClass("none")
});
s2.on("change",function () {
var val = $(this).val();
console.log(val);
s2.find("option").removeClass("none");
s1.find("option[value='"+ val +"']").addClass("none")
s3.find("option[value='"+ val +"']").addClass("none")
});
s3.on("change",function () {
var val = $(this).val();
console.log(val)
s3.find("option").removeClass("none");
s1.find("option[value='"+ val +"']").addClass("none")
s2.find("option[value='"+ val +"']").addClass("none")
});
});
</script>
2⃣️
<body>
<select id="one">
</select>
<select id="two">
</select>
<select id="three">
</select>
</body>
<script>
var arr =[1,2,3,4,5,6,7,8,9,10]
var copy = []
$('select').change(function(){
arr = delArr(arr,Number($(this).val()))
arrs(arr)
})
function arrs(dataArr){
var select_jq = $('select')
for(var i = 0;$('select').length>i;i++){
var html = ''
if(copy[i] != Number(select_jq.eq(i).val()) && copy[i] != undefined){
dataArr.push(copy[i])
dataArr.sort(sortNum);
}
html+='<option disabled selected value></option>'
if(!select_jq.eq(i).val()){
for(var j = 0;dataArr.length>j;j++){
html +='<option value ="'+dataArr[j]+'">'+dataArr[j]+'</option>'
}
}else{
var crr = dataArr.slice(0)
crr.push(Number(select_jq.eq(i).val()));
copy[i] = Number(select_jq.eq(i).val());
crr.sort(sortNum);
for(var z = 0;crr.length>z;z++){
if(crr[z] == Number(select_jq.eq(i).val())){
html +='<option selected="selected" value ="'+crr[z]+'">'+crr[z]+'</option>'
}else{
html +='<option value ="'+crr[z]+'">'+crr[z]+'</option>'
}
}
}
select_jq.eq(i).html(html)
}
}
arrs(arr)
// 数组排序
function sortNum(a,b){
return a-b
}
// 删除数组
function delArr(arr,str){
var arrs = arr
for(var i =0;arrs.length>i;i++){
if(arrs[i]==str){
arrs.splice(i,1)
}
}
return arrs
}
</script>
view
<div id="app">
<select v-model="s1">
<option value="" selected>请选择</option>
<option v-for="item in options" :value="item" v-if="!(item == s2 || item == s3)">{{item}}</option>
</select>
<select v-model="s2">
<option value="" selected>请选择</option>
<option v-for="item in options" :value="item" v-if="!(item == s1 || item == s3)">{{item}}</option>
</select>
<select v-model="s3">
<option value="" selected>请选择</option>
<option v-for="item in options" :value="item" v-if="!(item == s2 || item == s1)">{{item}}</option>
</select>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
options: [1,2,3,4,5,6,7,8,9,10],
s1: "",
s2: "",
s3: ""
}
})
</script>
react
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var Content = React.createClass({
getInitialState: function() {
return {
list:[] //存放使用了的值
}
},
//获取子组件的新选值和旧值
getselect:function(newselect,oldselect){
if(newselect){ //返回值为0不添加到list
let s = this.state.list;
s.push(newselect) //把新值添加到list
let datas = [...new Set(s.filter(x => !(new Set([oldselect])).has(x) ) )] //求list和旧值的差集
console.log(datas)
this.setState({list:datas})
}
},
render:function(){
return(<div>
<h1>{this.state.list}</h1>
<Select data={this.state.list} getvalue={this.getselect}/>
<Select data={this.state.list} getvalue={this.getselect}/>
<Select data={this.state.list} getvalue={this.getselect}/>
</div>)
}
})
var Select = React.createClass({
getInitialState: function() {
return {
select:0 //保存当前值
}
},
changeClic: function(e){
this.props.getvalue(Number(e.target.value),this.state.select) //旧值
this.setState({select:Number(e.target.value)}) //新值
},
render:function(){
let option = [...new Set([1,2,3,4,5,6,7,8,9,10].filter(x => !new Set(this.props.data).has(x)))] //求可选值和已选值的差集
option.push(this.state.select) //加入当前选择值
let sect = option.map((x)=><option key={x} value ={x}>{x}</option>)
return(
<select onChange={this.changeClic}>
<option value ="0">请选择</option>
{sect}
</select>
)
}
})
React.render( <Content/>,
document.getElementById('app'),
function(){
console.log('渲染完成啦！！');
}
)
</script>
<div id="app"></div>
</body>
</html>