如果 html 表中的字符串 == 带有 Javascript 的内容，则显示按钮

Posted 2023-05-09

【中文标题】如果 html 表中的字符串 == 带有 Javascript 的内容，则显示按钮

【英文标题】：Show button if string in html table == something with Javascript

【发布时间】：2019-03-03 07:27:18

【问题描述】：

我仅在电子邮件 == 使用 javascript 的当前用户电子邮件地址时才尝试显示 x 按钮。

这就是我填充表格的方式

            var user = [e-mail]
            function getOrders() 
                $.ajax(
                    type: "get",
                    url: "http://127.0.0.1:9000/get-orders",
                    success: function (data) 
                        response = data["code"];
                        data = data["data"];
                        var dataArray = data.orders;

                        for (var i = 0; i < dataArray.length; i++) 
                            tr = $('<tr/>');
                            tr.append("<td>" + "<button id='cancelOrderButton;'>X</button>" + "</td>");
                            tr.append("<td>" + dataArray[i].room + "</td>");
                            tr.append("<td>" + dataArray[i].user + "</td>");
                            tr.append("<td>" + dataArray[i].real_name + "</td>");


                            $('.table1').append(tr);
                        ;
                    
                );
            ;

这是 html

                <table class="table1">
            <tr>
                <th></th>
                <th>Room</th>
                <th>Email</th>
                <th>Name</th>
            </tr>
        </table>

【问题讨论】：

当前用户的电子邮件存储在哪里？

现在它只是硬编码。稍后它会从后端获取它

那么你的问题到底是什么？它应该像比较变量/字符串一样简单：if(current_email === dataArray[i].user...) 在循环中，如果匹配，则追加按钮

tr.append("<td>" + (user === dataArray[i].user) ? "<button...>X</button>" : "" + "</td>");

【参考方案1】：

用引号将 [e-mail] 括起来。我还在 td 的附加之间添加了一个 if 语句，它首先验证它们是否与硬编码的电子邮件匹配。

if (dataArray[i].user == currentUser) 
  tr.append("<td>" + "<button id='cancelOrderButton;'>X</button>" + "</td>");
else
  tr.append("<td></td>");

var currentUser = '[e-mail]'

function getOrders() 
  $.ajax(
    type: "get",
    url: "http://127.0.0.1:9000/get-orders",
    success: function(data) 
      response = data["code"];
      data = data["data"];
      var dataArray = data.orders;

      for (var i = 0; i < dataArray.length; i++) 
        tr = $('<tr/>');
        if (dataArray[i].user == currentUser) 
          tr.append("<td>" + "<button id='cancelOrderButton;'>X</button>" + "</td>");
         else 
          tr.append("<td></td>");
        
        tr.append("<td>" + dataArray[i].room + "</td>");
        tr.append("<td>" + dataArray[i].user + "</td>");
        tr.append("<td>" + dataArray[i].real_name + "</td>");


        $('.table1').append(tr);
      ;
    
  );
;

<table class="table1">
  <tr>
    <th></th>
    <th>Room</th>
    <th>Email</th>
    <th>Name</th>
  </tr>
</table>

【讨论】：

感谢您的帮助！将 if (data[i].user == currentUser) 替换为 if (dataArray[i].user == currentUser) 并删除了第二个 tr.append("

" + " X" + "");

根据您的评论更正了 if 语句。 Np，祝项目好运。

【参考方案2】：

在构造数组时，您可以切换该特定按钮：

for (var i = 0; i < dataArray.length; i++)     
    var tr = $('<tr/>'),
        buttonTd = $('<td/>'),
        xButton = $('<button/>').attr(id, 'cancelOrderButton' + i).value('X').hide();

    tr.append(buttonTd.append(xButton));
    tr.append("<td>" + dataArray[i].room + "</td>");
    tr.append("<td>" + dataArray[i].user + "</td>");
    tr.append("<td>" + dataArray[i].real_name + "</td>");

    $('.table1').append(tr);
    if (user === dataArray[i].user) xButton.show();
;          

HTML

<table class="table1">
    <tr>
        <th>Action</th>
        <th>Room</th>
        <th>Email</th>
        <th>Name</th>
    </tr>
</table>