Home > Backend Development > PHP Tutorial > dwz使用jQuery追加表格,原有的行有相应的css样式,但是用jQuery追加的行没有样式

dwz使用jQuery追加表格,原有的行有相应的css样式,但是用jQuery追加的行没有样式

WBOY
Release: 2016-06-06 20:07:32
Original
1325 people have browsed it

如题
dwz如何才能解决使用jQuery追加的表格行有原生table行的样式?

<code><table class="list" width="100%" layouth="60">
        <thead>
            <tr>
                <th width="10%">ID</th>
                <th width="40%">报告编号</th>
                <th width="40%">试验编号</th>

            </tr>
        </thead>
        <tbody id="wtlb">
            <tr target="wtlb_list" rel="1">
                <td>1</td>
                <td>W201600001</td>
                <td>T201600001</td>
            </tr>
            <tr target="wtlb_list" rel="2">
                <td>1</td>
                <td>W201600002</td>
                <td>T201600002</td>
            </tr>
               
        </tbody>
    </table>
    <button id="add"> 添加行</button>
    <script type="text/javascript">
       $(document).ready(function(){
               $("#add").click(function(){
                $str='';
                $str+="<tr>";
                $str+="<td>000";
                $str+="<td>002";
                $str+="<td>003";   
                $str+="";
                $("#wtlb").append($str);
        });
       });
    </script></code>
Copy after login
Copy after login

回复内容:

如题
dwz如何才能解决使用jQuery追加的表格行有原生table行的样式?

<code><table class="list" width="100%" layouth="60">
        <thead>
            <tr>
                <th width="10%">ID</th>
                <th width="40%">报告编号</th>
                <th width="40%">试验编号</th>

            </tr>
        </thead>
        <tbody id="wtlb">
            <tr target="wtlb_list" rel="1">
                <td>1</td>
                <td>W201600001</td>
                <td>T201600001</td>
            </tr>
            <tr target="wtlb_list" rel="2">
                <td>1</td>
                <td>W201600002</td>
                <td>T201600002</td>
            </tr>
               
        </tbody>
    </table>
    <button id="add"> 添加行</button>
    <script type="text/javascript">
       $(document).ready(function(){
               $("#add").click(function(){
                $str='';
                $str+="<tr>";
                $str+="<td>000";
                $str+="<td>002";
                $str+="<td>003";   
                $str+="";
                $("#wtlb").append($str);
        });
       });
    </script></code>
Copy after login
Copy after login

虽然有一部分不太明白,不过你加的code和之前已有的不太一样啊:

<code class="javascript">$(document).ready(function(){
    $("#add").click(function(){
        $str='';
        $str+="<tr target='\"wtlb_list\"' rel='\"3\"'>";
        $str+="<td>000</td>";
        $str+="<td>002</td>";
        $str+="<td>003</td>";   
        $str+="</tr>";
        $("#wtlb").append($str);
    });
});</code>
Copy after login

rel的部分,看起来还有自增的需求,自增你搞得定

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template