小弟我想实现点图片也能传值这里如何修改呢!

我想实现点图片也能传值这里怎么修改呢!!!!

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>


<script language="javascript">
  
function showoper(){
    
  var oper="601,602,603,456,6688,";//服务器传来的数组串，也可以ajax
  var targetArray = oper.split(",");
   
  var table = document.getElementById("listTab");
  var cellcount = 4;//行的列数，可以按自己的要求修改
  var tr;//创建的行对象
    
  //以下代码自动生成单元格和文本框，并设置文本框的值
  for(var i = 0; i < targetArray.length; i++){  
  
      if (i % cellcount == 0){
          tr = document.createElement("tr");
          table.appendChild(tr);
      }
     // var Div=document.createElement("div");
      // Div.id='agent"+ i + "';
     //创建单元格时怎么给td 加上 div呢？
      //我想实现点图片也能传值这里怎么加呢？？？？
          //我想实现点图片也能传值这里怎么加呢？？？？          
     var td = document.createElement("td");//创建单元格
                   
           
      td.style.background = 'url("pic/user.jpg")';  //这里可换一个你自己的图片试试看
      
      td.innerHTML = " &nbsp;&nbsp;<br/><input type = 'text'  name = 'agent"+ i + "' value = '" + targetArray[i] + "' size='5'  onclick = 'javascript:clicknum(this.value);'/>";//设置单元格的内容
       
      tr.appendChild(td);//将生成的单元格插入行中
      
  }
}
   function clicknum(v){
                numtxt.value = v;
                numtxt.focus();
            }

  </script>

</HEAD>

<BODY onLoad="showoper();">
<table ><tbody id="listTab"></tbody>
</table>

<table>
<tr>
<td>
<input type="text" id="numtxt" name="numtxt" value="" class="numtxt">
</td>
</tr>
</table>

</BODY>
</HTML>

------解决方案--------------------
你图片做了背景怎么能点击到

不过可以做成点击 td 区域传值
------解决方案--------------------
如果点图片不同位置要有不同区域，判断下点击位置就行了，实际作其实不复杂。
------解决方案--------------------

JScript code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>


<script language="javascript">
  
function showoper(){
    
  var oper="601,602,603,456,6688,";//服务器传来的数组串，也可以ajax
  var targetArray = oper.split(",");
   
  var table = document.getElementById("listTab");
  var cellcount = 4;//行的列数，可以按自己的要求修改
  var tr;//创建的行对象
    
  //以下代码自动生成单元格和文本框，并设置文本框的值
  for(var i = 0; i < targetArray.length; i++){  
  
      if (i % cellcount == 0){
          tr = document.createElement("tr");
          table.appendChild(tr);
      }
     // var Div=document.createElement("div");
      // Div.id='agent"+ i + "';
     //创建单元格时怎么给td 加上 div呢？
      //我想实现点图片也能传值这里怎么加呢？？？？
          //我想实现点图片也能传值这里怎么加呢？？？？          
     var td = document.createElement("td");//创建单元格
      td.style.width = 104 + "px";
      td.style.height = 200 + "px";
      td.style.background = 'url("cards.jpg")';  //这里可换一个你自己的图片试试看
      
      td.innerHTML = " &nbsp;&nbsp;<br/><input type = 'text'  name = 'agent"+ i + "' value = '" + targetArray[i] + "' size='5'  onclick = 'javascript:clicknum(this);' />";//设置单元格的内容
      
      td.onclick =function(){
         clicknum(this); 
      };    
       
      tr.appendChild(td);//将生成的单元格插入行中
      
  }
}

function clicknum(v){
    var text = v.getElementsByTagName('input')[0].value; 
    document.getElementById('numtxt').value = text ;
}

</script>

</HEAD>

<BODY onLoad="showoper();">
<table ><tbody id="listTab"></tbody>
</table>

<table>
<tr>
<td>
<input type="text" id="numtxt" name="numtxt" value="" class="numtxt">
</td>
</tr>
</table>

</BODY>
</HTML>

小弟我想实现点图片也能传值这里如何修改呢!

相关推荐