两个表格数据双击相互转换

序号 商品ID 商品编码 商品名称 商品描述 商品数量 操作选择
1 1000 3003 电视(康佳) 21寸 yanleigis
2 200 3004 电视(长虹) 44寸 landgis





已选择的商品

序号 商品ID 商品编码 商品名称 商品描述 商品数量 操作选择

 

 

 

 

<html>  
  <head>  
  <title>两个表格数据双击相互转换 by yanleigis Email:[email protected]</title>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <link   href="css/style.css"   rel="stylesheet"   type="text/css">  
  <style   type="text/css"> 
  td   {  
  line-height:   20px;  
  height:20px;  
  }  
  .style2 {color: #FF0000}
  </style>  
  </head>  
   
  <body   bgcolor="#E7E7F7"   text="#000000">  
 
      <table   width="609"   border="1"   class="tabout"   id="ylTable1"   onDblClick="yldbclick(ylTable2)" name="conditionTable"   cellspacing="0"   bordercolor="#0099cc"   style="border-collapse:collapse;">  
          <tr bgcolor="#00FF99">    
              <th   width="28"   nowrap   class="thlist style2">序号</th>  
              <th   width="51"   nowrap   class="thlist style2">商品ID</th>  
              <th   width="59"   nowrap   class="thlist style2">商品编码</th>  
              <th   width="111"   nowrap   class="thlist style2">商品名称</th>  
              <th   width="177"   nowrap   class="thlist style2">商品描述</th>  
              <th   width="62"   nowrap   class="thlist style2">商品数量</th>  
              <th   width="91"   nowrap   class="thlist style2">操作选择</th>  
          </tr>  
          <tr>    
              <td   width="28"   height="21">1</td>  
              <td   width="51"   height="21">1000</td>  
              <td   width="59"   height="21">3003</td>  
              <td   width="111"   height="21"   >电视(康佳)</td>  
              <td   width="177"   height="21">21寸 yanleigis</td>  
              <td   width="62"><input   type="text"   name="yanlei4"   value="10"   size="5"/></td>
              <td   width="91"><input   type="checkbox"   name="yanlei3"   value="23344"   checked   /></td>
          </tr>  
          <tr>    
              <td   width="28">2</td>  
              <td   width="51">200</td>  
              <td   width="59">3004</td>  
              <td   width="111">电视(长虹)</td>  
              <td   width="177">44寸 landgis</td>  
              <td   width="62"><input   type="text"   name="yanlei2"   value="10"   size="5"/></td>
              <td   width="91"><input   type="checkbox"   name="yanleil"   value="23344"   checked   /></td>  
          </tr>  
      </table>  
 
  <br>  
  <br>  
  <br>  
  <br>  
  已选择的商品  
  <table   width="609"   border="1"   name="testTable"   id="ylTable2"  onDblClick="yldbclick(ylTable1)"   cellspacing="0"  style="border-collapse:collapse;"   bordercolor="#0099cc">  
          <tr bgcolor="#33FFCC">    
              <th   width="28"   nowrap   class="thlist style2">序号</th>  
              <th   width="51"   nowrap   class="thlist style2">商品ID</th>  
              <th   width="59"   nowrap   class="thlist style2">商品编码</th>  
              <th   width="111"   nowrap   class="thlist style2">商品名称</th>  
              <th   width="177"   nowrap   class="thlist style2">商品描述</th>  
              <th   width="62"   nowrap   class="thlist style2">商品数量</th>  
              <th   width="91"   nowrap   class="thlist style2">操作选择</th>  
          </tr>  
  </table>  
  <Script   language="JavaScript">  
  function yldbclick(testTable)
{
 var   obj=event.srcElement;

if (obj.tagName!="TD")return;

 while(obj=obj.parentElement)
 {
  if(obj.tagName=="TR"||obj.tagName=="TD")
   break;

  return;
 }

 testTable.insertRow().appendChild(obj);

 
}
   
  </Script>  
 

  </body>  
  </html>  

你可能感兴趣的:(JavaScript,function,Class,input,border,stylesheet)