Question

我想征询大家的意见，因为我无法在表结构中显示html标签。
其实我要显示的是“链接”。
为了清楚起见，我将向您详细说明。

我正在借助 javascript 和 jquery 制作自动生成的表结构视图，该视图显示数据库中的数据，并希望将这些数据显示为表结构，其中还包括允许用户编辑数据的链接。而已。

请参见下图：

如您所见，链接显示为普通字符。
因此，任何知道答案的人都请给我建议。

下面是代码：

//php
        $sql = "SELECT * FROM v_category";
        $dbaction = new db_action($sql,'G');
        $result = $dbaction->db_process();
        $dataRows = "Category Name|Remark|Edit|";

        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                $ctgr_id = $row["ctgr_id"];
                $ctgr_name = $row["ctgr_name"];
                $remark = $row["remk"];
                $link = "<a href='?cv=ms-category&mode=2&id=$ctgr_id'>link</a>";

                $dataRows = $dataRows . "**row**" . $ctgr_name . "|";
                $dataRows = $dataRows . $remark . "|";
                $dataRows = $dataRows . $link;
            }
        } else {
            echo "0 results";
        }
        echo '<div id="draw-grid" class="tbl-responsive" style="overflow-x:auto;"><script>DrawTable("draw-grid","'.$dataRows.'");</script></div>';

//javascript
function DrawTable(Container,dataRows)
{
    dataRows =  dataRows.split(ROW_SPLITTER);
    var tTable=$('<table>');
    //draw the table header
    tTable.append(drawHeader(dataRows[0])); 
    //draw the table body
    tTable.append(drawBody(dataRows));
   //add table to wrapper container first and then add into the parent  container
    $('<div>').append(tTable)
          .appendTo($('#'+Container));
    return;
}
function drawHeader(headerRow)
{
    var headerRowColumns = headerRow.split("|");
    var tblRow=$('<tr>');
    headerRowColumns.forEach(function(element,index) {
        $('<th>')
        .text(element)
        .appendTo(tblRow);  
    });
    return $('<thead>').append(tblRow);
}
function drawBody(objRows)
{
    var tBody=$('<tbody>');

    objRows.forEach(
    function(objRow,index) 
    {
        if(index!=0)
        {   
            tBody.append(drawBodyRow(objRow,index));    
        }
    });
    return tBody;
}

function drawBodyRow(bodyRow,rowIndex)
{
    var bodyRowColumns = bodyRow.split("|");    
    var tRow=$('<tr>');

    bodyRowColumns.forEach(function(element,columnIndex) 
    {
        $('<td>').text(element).appendTo(tRow);
    });
    return tRow;
}

Answer 1

$('<td>').text(element).appendTo(tRow);

在此行以及其他类似的行中，您将匹配元素的内部 text 设置为一个值。

在几乎所有情况下，这实际上都是一件好事。您不想将任意HTML插入要使用文本值的上下文中。否则，您将面临潜在的安全问题，或者至少是无效的HTML。

如果您确实打算注入HTML，则应该做的是将这些元素附加到此元素中。

您的代码也有其他问题...

$link = "<a href='?cv=ms-category&mode=2&id=$ctgr_id'>link</a>";

在这一行中，您要将任意数据插入URL ，并将插入HTML，没有任何转义。使用http_build_query()来转义查询字符串的数据。然后，请确保对注入HTML的任意数据使用htmlspecialchars()，以确保在该上下文中转义了该数据。

为什么html标记不起作用并显示为字符串值？

1 个答案: