首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js动态平添的行中td的样式不起作用

2012-10-10 
js动态添加的行中td的样式不起作用各位大虾会的就帮帮忙,在线等在表格中原先有一行,动态添加的行中td的样

js动态添加的行中td的样式不起作用
各位大虾会的就帮帮忙,在线等

在表格中原先有一行,动态添加的行中td的样式不起作用,是什么问题?
代码如下

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyKPIDetail4_T.aspx.vb" Inherits="MyKPIDetail4_T" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>在3的基础上删除delete改为删除选中行</title>
  <style type ="text/css" >
  .td0{background-color:White ;width:500px;}
  .td1{background-color:White ;width:80px;}
  .td2{background-color:White ;width:100px;}
  .td3{background-color:White ;width:200px;}
  .td4{background-color:White ;width:100px;}
  </style>
  <script language ="javascript" type ="text/javascript" >
  var linenum = 1;
  var strvalue;
  var strtext;
   
  function countWeight()
  {
  var WeightT = 0;
  for (var i=1 ;i<= linenum ;i++)
  {
  if (document .all["tb_line"+i].value == "" || document .all["tb_line"+i].value ==null)
  {

  }
  else 
  {
  var weight = parseInt(document .all["tb_line"+i].value);
  if(weight<=100 && weight >0)
  {
  WeightT += parseInt(document .all["tb_line"+i].value);
  }
  else
  {
  alert ("权重必须是0到100之间的数字!");
  }
  }
  }
  document .all["lb_weight"].innerHTML = WeightT ;
  };
  function delTR(obj)
  {
  var table = obj .parentNode.parentNode.parentNode;
  table .removeChild(obj .parentNode.parentNode);
  };
  function Add_tr()
  {
  if (linenum ==1)
  {
  getoption ();
  }  
  linenum =linenum +1;
  var tableobj = document .getElementById ("table1");
  var trobj = document .createElement ("tr");
  trobj .setAttribute ("id","tr"+linenum);

  // 添加td0
  var tdobj0 = document .createElement ("td");
  tdobj0 .setAttribute ("class","td0");
  var textareaobj0 = document .createElement ("textarea");
  textareaobj0.setAttribute ("id","ta_line"+linenum );
  textareaobj0.setAttribute ("name","ta_line"+linenum );
  textareaobj0 .setAttribute ("cols","35");
  textareaobj0 .setAttribute ("rows","2");
  tdobj0 .appendChild(textareaobj0 );
  trobj .appendChild (tdobj0 );
   
  // 添加td1
  var tdobj1 = document .createElement ("td");
  tdobj1 .setAttribute ("class","td1");
  var textobj1 = document .createElement ("input");
  textobj1.setAttribute ("id","tb_line"+linenum );
  textobj1.setAttribute ("name","tb_line"+linenum );
  textobj1.setAttribute ("runat","server");


  textobj1.setAttribute ("type","text");
  //textobj1.setAttribute ("onchange","countWeight()");
  //document .getElementById ("tb_line"+linenum ).onchange = countWeight();
  tdobj1 .appendChild(textobj1 );
  trobj .appendChild (tdobj1 );

  // 添加td2
  var tdobj2 = document .createElement ("td");
  tdobj2 .setAttribute ("class","td2");
  var lableobj2 = document .createElement ("span");
  lableobj2.setAttribute ("id","lb_line"+linenum );
  tdobj2 .appendChild(lableobj2 );
  trobj .appendChild (tdobj2 );

  // 添加td3
  var tdobj3 = document .createElement ("td");
  tdobj3 .setAttribute ("class","td3");
  var ddlobj3 = document .createElement ("select");
  ddlobj3.setAttribute ("id","ddl_line"+linenum );
  ddlobj3.setAttribute ("name","ddl_line"+linenum );
  tdobj3 .appendChild(ddlobj3 );
  trobj .appendChild (tdobj3 );

  // 添加td4(存在问题暂时不用,现在只能删除最后一行)
// var tdobj4 = document .createElement ("td");
// tdobj4 .setAttribute ("class","td4");
// var aobj4 = document .createElement ("a");
// aobj4.setAttribute ("id","a_line"+linenum );
// aobj4.setAttribute ("href","#");
// aobj4.setAttribute ("innerHTML","删除");
// tdobj4 .appendChild(aobj4 );
// trobj .appendChild (tdobj4 );
   
  tableobj .firstChild .appendChild (trobj);
  setoption ("ddl_line"+linenum );
  document .getElementById ("tb_line"+linenum ).onchange = function(){countWeight ()};
  //document .getElementById ("a_line"+linenum ).onclick = function(){delTR()};
  }
  function getoption()
  {
  var sel = document .all["ddl_line1"];
  strvalue = new Array ();
  strtext = new Array ();
  for (var i=0;i<sel.length;i++)
  {
  strvalue .push(sel[i].value);
  strtext .push (sel[i].text);
  };
  };
  function setoption(obj)
  {
  var sel = document .all[obj];
  for (var i=0;i<strvalue .length;i++)
  {
  sel[i] = new Option(strtext [i] ,strvalue [i]);
  }
  };
  function Del_tr()
  {
  var table = document .getElementById ("table1");
  var rowCount = table .rows .length;
  table .deleteRow (rowCount -1);
  };
  function hexToString(h) {
  var r ="";
  for (var i = (h.substr(0, 2) == "0x") ? 2 : 0; i < h.length; i += 2) {
  r+=(String.fromCharCode(parseInt(h.substr(i, 2), 16)));
  }
  return r;
  };
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <table id ="table1" style="width: 100%; background-color:#CCCCCC">
  <tr id = "tr1">
  <td class ="td0 ">
  <textarea id="ta_line1" name ="ta_line1" runat ="server" cols="35" rows="2"></textarea>


  </td>
  <td class ="td1 ">
  <input id="tb_line1" name ="tb_line1" runat ="server" type="text" onchange="countWeight()"/>
  </td>
  <td class ="td2 ">
  <span id="lb_line1" runat ="server" ></span>
  </td>
  <td class ="td3 ">
  <select id="ddl_line1" name = "ddl_line1" runat ="server" >
  </select>
  </td>
  </tr>
  </table>
  <br /><br />
  <input type = "button" id ="bt_addtr" onclick ="Add_tr()" value="添加一行"/>
  <span id = "lb_weight" title ="权重和必须等于100"></span>
  <input type = "button" id ="bt_deltr" onclick ="Del_tr()" value="删除最后一行"/>
  </div>
  <table >
  <tr>
  <td>
  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
  <asp:Button ID="Button1" runat="server" Text="Button" /><br />
  <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList><br />
  <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" ></asp:TextBox>
  </td>
  </tr>
  <tr>
  <td>
  <select id="Select1" runat ="server" ></select>
  </td>
  </tr>
  </table>
  </form>
</body>
</html>


[解决办法]
tdobj0 .setAttribute ("className","td0");试一试
[解决办法]
textobj1.style.width = "30px";

热点排行