jquery中table里面的tr里的input添加一行，并且第一列autoincrement

时间：2023-11-10 23:29:20

实现添加一行并且第一列由A0开始autoincrement，代码如下（在文件的同一个文件夹下添加一个jquery.js文件）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>autoincrement</title>

<script src='jquery.js'></script>

<script>

$(function(){

	$('#btnok').on('click',function(){

		//get the last tr

		var addObj = $('<tr>' + $('table tr:last').html() + '</tr>');

		//get class="add" last value

		var valObj = $('input.add').last().val(),prefix = valObj.substr(0,1), lotId = prefix + (parseInt(valObj.substr(1))+1);

		console.log(addObj);

		addObj.find('input.add').val(lotId);

		$('#tta').append(addObj);

	});

});

</script>

</head>

<body>

<input id="btnok" type='button' value="click">

<table border='1' width="400" id="tta">

<tr width="200">

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr width="200">

<td><input type="text" name="add[]" class="add" value="A0"></td>

<td><input type="text"></td>

<td><input type="text"></td>

<td><input type="text"></td>

<td><input type="text"></td>

</tr>

</table>

</body>

</html>

相关文章