html前台页面用js数组如何实现这两个功能

html前台页面用js数组如何实现这两个功能,第1张

<!DOCTYPE html>

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title></title>

<style>

table{

margin:0 auto

width:500px

border-collapse:collapse

}

caption{

text-align:left

margin-bottom:10px

}

th,td{

border:1px solid gray

text-align:center

}

table .cc{

width:60px

border:0

text-align:center

}

</style>

<script>

var arr=[

"序号","名称","性别","年龄","专业"

]

onload=function(){

var r=tb.insertRow(tb.rows.length)

for(var i=0i<arr.lengthi++){

var c=r.insertCell(r.cells.length)

c.innerHTML=arr[i]

}

}

var look=function(){

var reg=new RegExp(".*"+t.value.replace(/^\s+|\s+$/g,"")+".*","ig")

var rows=tb.rows

for(var i=1i<rows.lengthi++){

var cells=rows[i].cells

var isExisted=false

for(var j=0j<cells.lengthj++){

if(cells[j].innerHTML.match(reg)){

isExisted=true

break

}

}

if(!isExisted){

rows[i].style.display="none"

}else{

rows[i].style.display=""

}

}

}

var add=function(){

var r=tb.insertRow(tb.rows.length)

for(var i=0i<arr.lengthi++){

var c=r.insertCell(r.cells.length)

c.innerHTML=arr[i]+(tb.rows.length-1)

c.onclick=function(){

if(!this.tag){

var txt=document.createElement("input")

txt.className="cc"

txt.type="text"

txt.value=this.innerHTML

this.innerHTML=""

this.appendChild(txt)

txt.focus()

txt.select()

this.tag=!this.tag

}

}

c.onmouseleave=function(){

this.innerHTML=this.children[0].value

this.tag=false

}

}

}

</script>

  </head>

<body>

   <table id="tb">

 <caption><input type="text" id="t" />

 <input type="button" value="查询" onclick="look()" />

 <input type="button" value="新增" onclick="add()" />

 </caption>

</table>

  </body>

</html>

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script>

    var arr1=['a','b','c','d']

</script>

<script>

    alert(arr1)

</script>

</head>

<body>

</body>

</html>

直接调用就可以。确保定义数组的那个JS在调用那个JS之前即可。

比如你的数组是arr,首先查找name所在的索引,用var index=arr.indexOf(文本框的数字)

找到后 你需要的值为new=arr[index]

至于你文本框中的数字你可以在js中用一个变量接收。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7053911.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存