读书人

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

发布时间: 2012-10-10 13:58:11 作者: rapoo

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";

读书人网 >JavaScript

热点推荐