이 글의 내용은 버튼을 클릭하여 테이블에 행을 추가하는 방법(수동으로 추가됨)에 대한 내용입니다. 필요한 친구들이 참고하면 도움이 될 것입니다. 당신에게.
문제 설명: 버튼을 클릭하여 테이블에 행을 추가하는 기능을 구현하고 싶은데, Lauii가 툴바를 통합하지 않아서 이 기능을 수동으로 추가해야 합니다.
원래 내가 만든 테이블; write는 다음과 같이 구현되었습니다.
1 2 3 4 5 6 7 8 9 10 | $( "#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);
});
|
로그인 후 복사
추가 효과를 얻을 수 없습니다. 쿼리 후에 이는 테이블이 정적 방식으로 작성되었다는 사실에 기반한 것으로 나타났습니다. 즉:
1 | <table class = "layui-table" lay-data= "{height:315, url:'/demo/table/user/', page:true, id:'tableInfo'}" lay-filter= "test" > <thead> <tr> <th lay-data= "{field:'id', width:80, sort: true}" >ID</th> <th lay-data= "{field:'username', width:80}" >用户名</th> <th lay-data= "{field:'sex', width:80, sort: true}" >性别</th> <th lay-data= "{field:'city'}" >城市</th> <th lay-data= "{field:'sign'}" >签名</th> <th lay-data= "{field:'experience', sort: true}" >积分</th> <th lay-data= "{field:'score', sort: true}" >评分</th> <th lay-data= "{field:'classify'}" >职业</th> <th lay-data= "{field:'wealth', sort: true}" >财富</th> </tr> </thead> </table>
|
로그인 후 복사
그리고 제가 사용한 것은 다음과 같습니다. 이런 식으로:
1 | <table class = "layui-hide" id= "baseInfo" lay-filter= "demo" lay-data= "{height: 'full-200', cellMinWidth: 80, page: true, limit:30}" ></table>
|
로그인 후 복사
열 이름의 정의가 작성됩니다. table.render({}) 메서드의
솔루션: 테이블을 정적 메서드, 즉 코드의 두 번째 부분으로 다시 작성합니다.
A 이때 새로운 문제가 나타납니다. 클릭할 때마다 두 개의 데이터 조각이 나타나므로 다음과 같이 수정해야 합니다.
1 | $( ".layui-table-body .layui-table" ).append(tr);
|
로그인 후 복사
마지막으로 버튼을 클릭하여 데이터 조각을 추가하는 효과를 얻을 수 있습니다.
관련 권장 사항:
JQuery를 사용하여 동적 테이블 클릭 버튼 테이블을 구현하여 row_jquery
를 추가합니다.
위 내용은 버튼을 클릭하여 테이블에 행을 추가하도록layui를 구현하는 방법(수동으로 추가됨)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!