jQuery通过PHP将新行附加到UL LI

jquery append new rows to ul li via php

本文关键字：UL LI 新行附 通过 PHP jQuery      更新时间：2023-09-26

这是我的HTML/php页面的简化

<html>
<head>
</head>
<body>
<div class="main_column">
    <h2> main column </h2> 
    <p>content</p>
</div>
<div class="side_column">
    <h3> main column </h3>
    <ul class="list">
        <?php echo printSideColumn(1,3)
    </ul>
    <a>load 3 next rows</a>
</div>
</body>
</html>

这是该页面中的PHP函数：

function printSideColumn($begin,$count)
{
        $code = null;
        for($i = $begin; $i<$begin + $count ; $i ++)
           $code '<li>rows'.$i.'</li>';
        return $code;
}

对于第一个，当我加载页面时;这个函数运行： printSideColumn(1,3)所以打印<li>rows1</li>直到<li>rows3</li>

现在我想通过 jquery 加载接下来的 3 行...我的意思是 3 个新行附加到旧行（不刷新旧行）

（所以我会<li>rows1</li>直到<li>rows6</li>

如何更改此代码以通过 JQ 执行此操作？

我尝试自己做：

标记a的第一个更改：

 <a onclick="load();">load 3 next rows</a>

并添加一个 js 函数：

function load(){
  $('#add').on('click', function() { $("ul.list").append('<li>rows</li>');
    }, 'html');
  });
}

但我不知道最后一行的微积分数如何...并将$begin和$count发送到jquery...然后jquery调用我的php函数来打印它！

你能帮忙完成我的代码吗？

要使用JS添加行并获取当前行的编号，您只需稍微更改一下JS：

$('ul.list').append('<li> row ' + $('ul.list li').size() + '</li>');

我不明白你还需要什么。

我建议你有一个函数来在接下来的几行中对你的php函数进行ajax调用。您可以使用 javascript 变量跟踪您的位置。

一个例子是：

var begin = 1;
var count = 3;
function getRows(b, c) {
    $.post('pathToPhp', {begin: b; count: c}, function(data){
        $('.list').append(data);
        begin = b;
        count = c;
    });
}
在 php 端，您只需使用 $_POST['begin']

和 $_POST['count'] 捕获值，然后使用 printSideColumn 函数。

相关文章：