Heim >Web-Frontend >HTML-Tutorial >如何设计一个可以增加行的表格?_html/css_WEB-ITnose

如何设计一个可以增加行的表格?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:271301Durchsuche

  <tr>    <td>1</td>      </tr>  <tr>    <td>2</td>      </tr>  <tr>    <td>3</td>      </tr>  <tr>    <td>4</td>      </tr>  </table>

忽然发现如果公司继续需要表格的行呢,用什么方法增加?


回复讨论(解决方案)

js代码:插入行

table.insertRow(i)//插入第(i+1)行,行数(参数)从零开始 

向表格中动态添加行显示信息,做到滚动效果

参考jquery:

http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html

你也可以试试easy ui 的datagrid,可以从后台获取数据,也可以从前台进行调用js增加行

http://www.jeasyui.net/demo/338.html

干脆把table也设计成动态的,把增加行设计成一个方法

可以参考下该案例,添加行的方式自行定义

nbsp;html>




表格添加行

















<script></script>
<script> <br /> $(function(){ <br /> $("#add").click(function(){ <br /> var row="<tr>"+ <br /> "<td>4"+ <br /> "<td>4"+ <br /> ""; <br /> $("table").append(row); <br /> }); <br /> }) <br /> </script>
1 1
2 2
3 3


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn