js create a dynamic table row to add delete form

2009-06-28  来源:本站原创  分类:AJAX  人气:1273 

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns = " http://www.w3.org/1999/xhtml ">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title> </ title>

<style>
# tab (
border: 1px solid # aaa;
border-collapse: collapse;
width: 80%;
)
# tab th (
border: 1px solid # aaaaaa;
background: # ECE9D8;
border-collapse: collapse;
padding: 5px;
text-align: left;
)
# tab td (
border: 1px solid # d8d8d8;
border-collapse: collapse;
padding: 5px;
)
. txt (
border: 1px solid # 888;
background: # ECE9D8;
)
. checkBg (
border: 1px solid # aaaaaa;
background: # ECE9D8;
)
. checkTxt (
border: 1px solid # aaa;
background: # # d8d8d8;
)
. button (
border: 1px solid # 888; margin: 5px 0px;
width: 80px; background: # ECE9D8; height: 22px; line-height: 22px;
)
</ style>
<script language="javascript" type="text/javascript">
/ *
author: kevin
email: [email protected]
msn: [email protected]
website: http://www.bluekevin.com
* /
function $ (id) (return document.getElementById (id);)
function $ F (name) (return document.getElementsByTagName (name);)

function add () (
var otr = document.getElementById ( "tab"). insertRow (-1);
var checkTd = document.createElement ( "td");
checkTd.innerHTML = '<input type="checkbox" name="checkItem">';
var otd1 = document.createElement ( "td");
otd1.innerHTML = '<input type="text" name="infoName_txt""infoName_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>' ;
var otd2 = document.createElement ( "td");
otd2.innerHTML = '<input type="text" name="infoValue_txt""infoValue_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>' ;

otr.appendChild (checkTd);
otr.appendChild (otd1);
otr.appendChild (otd2);
)
function ccolor ()
(
var c1 = document.getElementsByName ( 'checkItem');
for (var i = 0; i <c1.length; i + +)
if (c1 [i]. checked)
(
c1 [i]. parentNode.parentNode.className = "checkBg";
c1 [i]. parentNode.nextSibling.firstChild.className = "checkTxt";
c1 [i]. parentNode.nextSibling.nextSibling.firstChild.className = "checkTxt";
)
else (c1 [i]. parentNode.parentNode.className = "";
c1 [i]. parentNode.nextSibling.firstChild.className = "";
c1 [i]. parentNode.nextSibling.nextSibling.firstChild.className ="";}
)
function del () (
var c = document.getElementsByName ( 'checkItem');
var idArray = new Array ();
for (var i = 0; i <c.length; i + +)
if (c [i]. checked)
idArray.push (i);
var rowIndex;
var nextDiff = 0;
for (j = 0; j <idArray.length; j + +)
(
rowIndex = idArray [j] +1- nextDiff + +;
document.getElementById ( "tab"). deleteRow (rowIndex);
)
)
function save () (
var postString = $ ( "postString");
var checkboxs = document.getElementsByName ( "checkItem");
var ttab = document.getElementsByName ( "infoName_txt");
var tt2 = document.getElementsByName ( "infoValue_txt");

var idArray = new Array ();
for (i = 0; i <checkboxs.length; i + +)
(
idArray.push (ttab [i]. value + "|" + tt2 [i]. value);
)

postString.value = idArray.join ("-");
alert (postString.value);
)

function alldell ()
(
var des = document.getElementsByName ( 'checkItem');
for (var i = 0; i <des.length; i + +)
(
if (des [i]. checked = document.getElementById ( 'delall'). checked) (
des [i]. parentNode.parentNode.className = "checkBg";
des [i]. parentNode.nextSibling.firstChild.className = "checkTxt";
des [i]. parentNode.nextSibling.nextSibling.firstChild.className = "checkTxt";)
else (des [i]. parentNode.parentNode.className = "";
des [i]. parentNode.nextSibling.firstChild.className = "";
des [i]. parentNode.nextSibling.nextSibling.firstChild.className ="";}
)
)
</ script>
</ head>

<body>
<input name="addv_btn" type="button" value="add" />
<input name="del_btn" type="button" value="del" />
<input name="save" type="button" value="save" /> <br>

<table id="tab">
<tr>
<th width="5%"> <input type="checkbox" id="delall"> </ td>
<th width="40%"> Name </ td>
<th width="55%"> value </ td>
</ tr>
</ table>
<p>
<input type="text" name="postString">
</ p>
</ body>
</ html>

相关文章