Question

我有一个循环生成表，使用从数据库查询中检索的对象数组填充其行。

这是生成表格的尾声

export default class App extends Component {
    ...

    render() {
        const textInput = (
           <input ... value={this.state.text} onChange={this.onTextChange} />
        );

        return (
            <div>
                <Toolbar onSubmit={this.onSubmit} textInput={textInput} />
                <ImageContainer />
            </div>
        )
    }
}

这就是表格的样子

我希望它在最后一栏中有这样的按钮

这是循环为每一行

生成的代码示例

$sql = "UPDATE pedidos
SET estado = IF(delivery='ZICHER', 'Pagado', 'Por Cobrar')
WHERE comprador='$comprador'
AND estado = 'cart'";

$result = $mysqli->query($sql);

在最后一个td之后，应添加包含以下标记的附加td

indices = ["razonSocial", "nombre1", "telefonoFijo1", "telefonoMovil1", "correoElectronico1", "clave"];
indiceBotones = ["id"];
var selectArray = [];
jQuery.each(returned.listaproveedorfamilia, function(i, val) {                   
    selectArray.push({
        "id": val.id,
        "razonSocial": val.razonSocial, 
        "nombre1": val.nombre1,
        "telefonoFijo1": val.telefonoFijo1,
        "telefonoMovil1": val.telefonoMovil1,
        "correoElectronico1": val.correoElectronico1,
        "clave": val.clave
    });
});

$.each(selectArray, function(i, selected) {
    var tr = $('<tr>');
    $.each(indices, function(i, indice) {
        $('<td>').html(selected[indice]).appendTo(tr);
    });
    $.each(indiceBotones, function(i, indiceBoton){
        //Here I need to add the code for the two buttons in the same cell
    });
    tbody.append(tr);
});

因此，对于每一行，都应创建以下代码

<tr>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>PCR</td>
</tr>

如何修改循环以生成这些标记？谢谢你的帮助。

Answer 1

您可以遵循与其他表格单元格相同的逻辑。在javascript中执行时，我不相信<?php echo site_url() ?>会解析为网站网址。相反，最简单的解决方法是硬编码起始URL路径

...
$.each(selectArray, function(i, selected) {
    var tr = $('<tr>');
    $.each(indices, function(i, indice) {
        $('<td>').html(selected[indice]).appendTo(tr);
    });
    $.each(indiceBotones, function(i, indiceBoton){
        var itemId = selected[indiceBoton];

        var editButtonUrl = "/proveedor/edit/" + itemId;

        var editButtonHtml = "<a title='Editar' href='" + editButtonUrl + "' class='btn btn-info btn-xs'><span class='fa fa-pencil'></span></a>";

        var deleteButtonUrl = "proveedor/remove/" + itemId;

        var deleteButtonHtml = "<a title='Eliminar' href='" + deleteButtonUrl + "' class='btn btn-danger btn-xs'><span class='fa fa-trash'></span></a>";

        $('<td>').html(editButtonHtml + deleteButtonHtml).appendTo(tr);
    });
    tbody.append(tr);
});

Answer 2

<强> 1。动态网址

由于您的网址将使用JS生成，因此您需要让它知道您的网站网址是什么。您可以在JS中对其进行硬编码，或使其动态化，以便在切换域时不会中断。为此，您可以将其添加为PHP页面的<script>部分中的第一个<head>标记：

<script>window.SITE_ROOT = "<?php echo site_url('/'); ?>";</script>

它将创建一个JS可以访问的全局变量。

<强> 2。添加按钮

然后，您可以在代码中使用此变量：

$.each(indiceBotones, function(i, indiceBoton){
    $('<td>').html(
                     '<a title="Editar" href="' + SITE_ROOT + 'proveedor/edit/' + selected[indiceBoton] + '">Edit</a> ' 
                   + '<a title="Eliminar" href="' + SITE_ROOT + 'proveedor/remove/' + selected[indiceBoton] + '">Remove</a>'
                  ).appendTo(tr);
});

第3。演示

查看以下演示，了解一切应如何运作：

// For the demo var returned = {listaproveedorfamilia:[{id:1,name:"John"},{id:2,name:"Jessica"},{id:3,name:"Peter"},{id:4,name:"Harry"},{id:5,name:"Celia"}]}, tbody = $('table tbody'); // Nothing changed here, I just simplified the data structure for the demo indices = ["name"]; indiceBotones = ["id"]; var selectArray = []; jQuery.each(returned.listaproveedorfamilia, function(i, val) { selectArray.push({ "id": val.id, "name": val.name }); }); $.each(selectArray, function(i, selected) { var tr = $('<tr>'); $.each(indices, function(i, indice) { $('<td>').html(selected[indice]).appendTo(tr); }); // Here, we use the SITE_ROOT variable to create the links $.each(indiceBotones, function(i, indiceBoton){ $('<td>').html( '<a title="Editar" href="' + SITE_ROOT + 'proveedor/edit/' + selected[indiceBoton] + '">Edit</a> ' + '<a title="Eliminar" href="' + SITE_ROOT + 'proveedor/remove/' + selected[indiceBoton] + '">Remove</a>' ).appendTo(tr); }); tbody.append(tr); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script>window.SITE_ROOT = "http://yoursite.com/";</script> <table> <thead> <tr> <th>Name</th> <th>Options</th> </tr> </thead> <tbody> </tbody> </table>

在循环生成的表中向表行添加按钮

2 个答案: