如何在表格中使用添加方法

时间:2018-10-03 10:42:53

标签: jquery html

追加方法我是第一次使用,它在我的表格标签中不起作用我正在使用span标签,使用span标签我在从左到右附加到代码上,但是不能正常工作,就像我手动放置代码一样但是使用append方法无法正常工作,我不知道辞职为什么会在代码中发生。

<table>
    <tr>
        <td height="21" align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td align="left" valign="bottom" bgcolor="#FFFFFF"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td colspan="14" align="center" valign="bottom" bgcolor="#FFFF00"><font face="Agency-Roman" color="#000000">Week 1</font></td>

        <!-- <td align="left" valign="bottom" bgcolor="#FFFFFF"><font face="Agency-Roman" color="#000000"><br></font></td>
        <td colspan="14" align="center" valign="bottom" bgcolor="#FF6600"><font face="Agency-Roman" color="#FFFFFF">Week 2</font></td>
        --><!-- this code is comment when manually put this code is working proper -->
        <span1 class="divq"></span1>

    </tr>
</table>

我的jquery代码是

$(document).on('click', '.hello2', function (e) {
    $("span1").append(`
        <td align="left" valign="bottom" bgcolor="#FFFFFF">
            <font face="Agency-Roman" color="#000000"><br></font>
        </td>
        <td colspan="14" align="center" valign="bottom" bgcolor="#FF6600">
            <font face="Agency-Roman" color="#FFFFFF">Week 2</font>
        </td>
    `);
});

我也想知道如何利用append方法,我也可以与类一起使用吗?有类似方法通过我可以从左向右追加和从上到下运行追加方法

1 个答案:

答案 0 :(得分:0)

var i =2;
$(document).ready( function () {

$('#clickMe').click(function(){
        $("#specialTr").append(            
       '<td align="left" valign="bottom" bgcolor="#FFFFFF"><font face="Agency-Roman" color="#000000"><br></font></td>\n\
<td colspan="14" align="center" valign="bottom" bgcolor="#FF6600"><font face="Agency-Roman" color="#FFFFFF">Week '+i+'</font></td>'

                );
          i++;
                
           })
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
     <tr id="specialTr">
            <td height="21" align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
            <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
            <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
            <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
            <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
            <td align="left" valign="bottom"><font face="Agency-Roman" color="#000000"><br></font></td>
            <td align="left" valign="bottom" bgcolor="#FFFFFF"><font face="Agency-Roman" color="#000000"><br></font></td>
            <td colspan="14" align="center" valign="bottom" bgcolor="#FFFF00"><font face="Agency-Roman" color="#000000">Week 1</font></td>

    <!--                <td align="left" valign="bottom" bgcolor="#FFFFFF"><font face="Agency-Roman" color="#000000"><br></font></td>
                    <td colspan="14" align="center" valign="bottom" bgcolor="#FF6600"><font face="Agency-Roman" color="#FFFFFF">Week 2</font></td>
        --><!-- this code is comment when manually put this code its working proper -->

      </tr>
</table>

<button id="clickMe" >Click Me</button>

什么是span1标签? jQuery仅支持HTML元素。  您可以将tr直接附加到td