Ajax追加表格行时if条件失效，需根据WO_doc显示PDF图标

我需要实现仅当WO_doc字段不为空时显示PDF图标，但编写的if条件无法正常工作，相关代码如下：

<script type="text/javascript">
      $( "select[name='PEF_id']").change(function () {
       var Pefid = $(this).val();
        if(Pefid) {

        $.ajax({
            url: "<?php echo site_url('Admin/showwo');?>",
            dataType: 'Json',
            data: {'PEF_id': Pefid}, 
             success: function(response){
              $(".displayNone").removeClass("displayNone").addClass("displayHidden");
             $.each(response.wo,function(key, value) {
              $('.wodata').append('<tr>\
              <td>'+value['WO_no']+'</td>\
              <td>'+value['WO_date']+'</td>\
              <td>'+value['Agency_name']+'</td>\
              <td>'+value['WO_amount']+'</td>\
              <?php if("?>'+value['WO_doc']+'<?php" != null) { ?>\    ***this if condition is not working***
              <td><a href= "<?php echo site_url('/Admin/showwodoc/')?>'+value['WO_doc']+'" target="_blank" <i class="fa fa-file-pdf-o" style="font-size:36px"></i></a></td> <?php } else { ?> <td></td> <?php } ?>\
              <td><a href="<?php echo site_url('Admin/edit_wo/')?>'+value['WO_no']+'"><button type="submit" name="submit" class="btn btn-success">Update</button></a></td>\ 
              <td><button type="submit" name="submit" value="'+value['WO_no']+'" class="button-del btn btn-danger">Close this WO</button></td>\
              </tr>');
              });
             
        }
      });
    }
  });
</script> 

问题原因 #

你错误混用了服务器端PHP与客户端JavaScript的执行逻辑：

• PHP代码在服务器端就已经执行完毕，此时AJAX还未发起请求，value['WO_doc']这个客户端动态数据根本不存在，所以PHP的if判断完全起不到作用。
• 正确的做法是用JavaScript来判断AJAX返回的value['WO_doc']值，因为这是客户端拿到的动态数据。

修正后的代码 #

<script type="text/javascript">
      $( "select[name='PEF_id']").change(function () {
       var Pefid = $(this).val();
        if(Pefid) {

        $.ajax({
            url: "<?php echo site_url('Admin/showwo');?>",
            dataType: 'Json',
            data: {'PEF_id': Pefid}, 
             success: function(response){
              $(".displayNone").removeClass("displayNone").addClass("displayHidden");
             $.each(response.wo,function(key, value) {
              // 先定义PDF列的HTML
              let pdfTd = '<td></td>';
              if(value['WO_doc'] && value['WO_doc'].trim() !== '') {
                // WO_doc不为空时生成带PDF图标的链接
                pdfTd = `<td><a href="<?php echo site_url('/Admin/showwodoc/')?>${value['WO_doc']}" target="_blank">
                          <i class="fa fa-file-pdf-o" style="font-size:36px"></i>
                        </a></td>`;
              }
              // 拼接完整的表格行
              $('.wodata').append(`<tr>
              <td>${value['WO_no']}</td>
              <td>${value['WO_date']}</td>
              <td>${value['Agency_name']}</td>
              <td>${value['WO_amount']}</td>
              ${pdfTd}
              <td><a href="<?php echo site_url('Admin/edit_wo/')?>${value['WO_no']}"><button type="submit" name="submit" class="btn btn-success">Update</button></a></td>
              <td><button type="submit" name="submit" value="${value['WO_no']}" class="button-del btn btn-danger">Close this WO</button></td>
              </tr>`);
              });
             
        }
      });
    }
  });
</script>

修正说明 #

1. 用JavaScript的if(value['WO_doc'] && value['WO_doc'].trim() !== '')判断字段是否为空，同时排除纯空格的无效值
2. 使用模板字符串（反引号`）拼接HTML，比传统字符串拼接更清晰，避免转义问题
3. 提前定义pdfTd变量，根据判断结果赋值，让逻辑更直观

内容的提问来源于stack exchange，提问作者user19385162