实现添加一行并且第一列由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>

jquery中table里面的tr里的input添加一行，并且第一列autoincrement的更多相关文章

  1. 纪录一个table元素里面的tr th td

    <table border="1"> <tr> <th>name</th> <th>sex</th> < ...

  2. jquery获取table,遍历输出tr中各个td的内容（转载）

    首先,依赖jquery.. 1 $('#btntb').click(function(){ 2 $('#tab tr').each(function(i){ // 遍历 tr 3 $(this).ch ...

  3. JQuery中Table标签页和无缝滚动

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  5. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  6. jQuery操作table tr td

    1.鼠标移动行变色 $("#tab tr").hover(function(){ $(this).children("td").addClass("h ...

  7. jQuery操作Table学习总结[转]

    <style type="text/css">       .hover       {                  }    </style>< ...

  8. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  9. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

随机推荐

  1. 【转】JAVA中的浅拷贝和深拷贝

    原文网址:http://blog.bd17kaka.net/blog/2013/06/25/java-deep-copy/ JAVA中的浅拷贝和深拷贝(shallow copy and deep co ...

  2. FROM CSDN TO CNBLOGS

    做出了一个愉快的决定,以后会将博客从CSDN迁移到CNBLOGS 旧地址:http://blog.csdn.net/fifa0329,文章并不多 原因如下: 我再次出现了该博客违反了网站规则被关闭的问 ...

  3. uiautomatorviewer 识别android微信元素报错

    org.xml.sax.SAXParseException; systemId: file:/C:/Users/xxxxxxxxx/AppData/Local/Temp/uiautomatorview ...

  4. Swift字符串常用操作总结

    转自:http://www.jianshu.com/p/52e7580166ff 1.string转换为Int/Long/Float/Double/Bool等 var str1="100&q ...

  5. js点击打开弹窗

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Java中日期时间API小结

    Java中为处理日期和时间提供了大量的API,确实有把一件简单的事情搞复杂的嫌疑,各种类:Date Time Timestamp Calendar...,但是如果能够看到时间处理的本质就可以轻松hol ...

  7. 阿里云主机SSD实例磁盘测试及IO调度算法调整

    测试背景及环境说明 阿里云ECS 主机配置: 4C8G root@zabbix-master:~# grep -i "model name" /proc/cpuinfo model ...

  8. 第一次用IIS发布网站时遇到的两个问题

    1.  配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 无法识别的属性“targetFramework”.请注意属性 ...

  9. http status 源码

    private static readonly String[][] s_HTTPStatusDescriptions = new String[][] { null, new String[] { ...

  10. 让qq图标在自己的网站上显示方法

    代码如下: <div id="xixi" onmouseover="toBig()" style="top: 260px; left: 5px; ...