버튼을 클릭하여 테이블에 행을 추가하도록layui를 구현하는 방법(수동으로 추가됨)-JS 튜토리얼-php.cn

버튼을 클릭하여 테이블에 행을 추가하도록layui를 구현하는 방법(수동으로 추가됨)

不言

풀어 주다： 2018-09-07 15:29:27

원래의

12694명이 탐색했습니다.

이 글의 내용은 버튼을 클릭하여 테이블에 행을 추가하는 방법(수동으로 추가됨)에 대한 내용입니다. 필요한 친구들이 참고하면 도움이 될 것입니다. 당신에게.

문제 설명: 버튼을 클릭하여 테이블에 행을 추가하는 기능을 구현하고 싶은데, Lauii가 툴바를 통합하지 않아서 이 기능을 수동으로 추가해야 합니다.

원래 내가 만든 테이블; write는 다음과 같이 구현되었습니다.

$("#addTable").click(function(){
			       var tr=" <tr>"+
			    	     "  <td>11</td>"+
			    	     "  <td>22</td>"+
			    	     "  <td>33</td>"+
			    	     "  <td>44</td>"+
			    	     "  <td>55</td>"+
			    	     "  </tr>";                  
					$(".layui-table").append(tr);
				});

로그인 후 복사

추가 효과를 얻을 수 없습니다. 쿼리 후에 이는 테이블이 정적 방식으로 작성되었다는 사실에 기반한 것으로 나타났습니다. 즉:

<table class="layui-table" lay-data="{height:315, url:&#39;/demo/table/user/&#39;, page:true, id:&#39;tableInfo&#39;}" lay-filter="test">			  	<thead>				    <tr>				      <th lay-data="{field:&#39;id&#39;, width:80, sort: true}">ID</th>				      <th lay-data="{field:&#39;username&#39;, width:80}">用户名</th>				      <th lay-data="{field:&#39;sex&#39;, width:80, sort: true}">性别</th>				      <th lay-data="{field:&#39;city&#39;}">城市</th>				      <th lay-data="{field:&#39;sign&#39;}">签名</th>				      <th lay-data="{field:&#39;experience&#39;, sort: true}">积分</th>				      <th lay-data="{field:&#39;score&#39;, sort: true}">评分</th>				      <th lay-data="{field:&#39;classify&#39;}">职业</th>				      <th lay-data="{field:&#39;wealth&#39;, sort: true}">财富</th>				    </tr>				  </thead>				</table>

로그인 후 복사

그리고 제가 사용한 것은 다음과 같습니다. 이런 식으로:

<table class="layui-hide" id="baseInfo"  lay-filter="demo" lay-data="{height: &#39;full-200&#39;, cellMinWidth: 80, page: true, limit:30}"></table>

로그인 후 복사

열 이름의 정의가 작성됩니다. table.render({}) 메서드의

솔루션: 테이블을 정적 메서드, 즉 코드의 두 번째 부분으로 다시 작성합니다.

A 이때 새로운 문제가 나타납니다. 클릭할 때마다 두 개의 데이터 조각이 나타나므로 다음과 같이 수정해야 합니다.

$(".layui-table-body .layui-table").append(tr);

로그인 후 복사

마지막으로 버튼을 클릭하여 데이터 조각을 추가하는 효과를 얻을 수 있습니다.