jquery动态添加行, table checkbox全选
jquery动态添加行及获取值
<head>
<title>table动态添加行</title>
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<table id="table" border="0" style="text-align:center">
<tr><td>id</td><td>one</td><td>two</td></tr>
<tr class="tr">
<td><input type="text" class="bianhao" value="1" disabled="disabled" style="width:15px;" /></td>
<td><input type="text" class="one" /></td>
<td><input type="text" class="two" /></td>
</tr>
</table>
<input type="button" value="添加" onclick="AddTr();" />
<input type="button" value="得到值" id="btnGetValue"/>
<div id="ShowValue"></div>
<script type="text/javascript">
function AddTr() {
var i = $('#table tr:gt(0)').length;
if (i >= 5) {
alert('最多有5行');
return;
}
var table = $('#table');
var tr_1 = $('<tr class="tr"></tr>');
var td_bianhao = $('<td><input type="text" class="bianhao" disabled="disabled" value="' + (i + 1) + '" style="width:15px;" /></td>');
var td_one = $('<td><input type="text" class="one" /></td>');
var td_two = $('<td><input type="text" class="two" /></td>');
var td_delete = $('<td><a href="javascript:void(0);">删除</a></td>');
td_delete.click(function () {
if (confirm('是否删除')) {
tr_1.remove();
}
$('.bianhao').each(function (i, item) {
item.value = (i + 1);
});
});
tr_1.append(td_bianhao);
tr_1.append(td_one);
tr_1.append(td_two);
tr_1.append(td_delete);
tr_1.appendTo(table);
}
function checkForm() {
if (!isNullOne()) {
alert('one列不能为空');
return false;
}
if (!isNullTwo()) {
alert('two为1到3位数字');
return false;
}
var values = "";
$('.tr').each(function (i, item) {
var id = $(item).find(".bianhao").val();
var one = $(item).find(".one").val();
var two = $(item).find(".two").val();
var str = id + "/" + one + "/" + two + ",<br/>";
values += str;
});
$('#ShowValue').html(values);
}
function isNullOne() {
var t = true;
$('.one').each(function (i, item) {
if ($(item).val() == "") {
t = false;
}
});
return t;
}
function isNullTwo() {
var t = true;
var reg = /^\d{1,3}$/;
$('.two').each(function (i, item) {
if (!reg.test($(item).val())) {
t = false;
}
});
return t;
}
$('#btnGetValue').click(function () {
return checkForm();
});
</script>
</body>
table 表里checkbox元素全选
<table id="table" border="0">
<tr><td colspan="2"><input type="checkbox" value="全选" onclick="CheckAll('table',this)" /></td></tr>
<tr><td><input type="checkbox" /></td><td>111</td></tr>
<tr><td><input type="checkbox" /></td><td>222</td></tr>
<tr><td><input type="checkbox" /></td><td>333</td></tr>
<tr><td><input type="checkbox" /></td><td>444</td></tr>
<tr><td><input type="checkbox" /></td><td>555</td></tr>
</table>
<script type="text/javascript">
function CheckAll(table, check) {
$('#' + table + " :checkbox:gt(0)").each(function (i, item) {
item.checked = check.checked;
});
}
</script>
</body>