javascript - 使用 jQuery MVC 将 SQL 表数据转换为 HTML 表

Question

为此，我正在尝试将 SQL 表详细信息转换为 HTML 表，我所做的是创建了一个 Controller 、模型和 View 。我还创建了包含凭单编号和金额字段的 SQL 表。这是我在这里创建 Controller 的方式我已经引用了模型，模型演示

<HttpGet>
Function GetSalesDetail(invoiceId As String) As JsonResult
    Dim listSalesDetail As List(Of Hashtable) = New ModelDemo().GetSalesDetail(invoiceId)
    Return Json(listSalesDetail, JsonRequestBehavior.AllowGet)
End Function

模型演示代码由SQL连接组成

Public Function GetSalesDetail(invoiceId As String) As List(Of Hashtable)
    Dim listSalesDetail As List(Of Hashtable) = New List(Of Hashtable)
    Dim arraySalesDetail As Hashtable
    'Dim arraySalesDetail As Dictionary(Of String, String) '**Associative array**'
    Dim conn = New SqlConnection(connStringLocal)
    conn.Open()
    Using query = New SqlCommand("SELECT vchNum,productName,Qty,Price,Amount,total FROM BillDetails 
    WHERE vchNum='" & invoiceId & "'", conn)
        Using resultSet = query.ExecuteReader
            If resultSet.HasRows Then
                While resultSet.Read()
                    'arraySalesDetail = New Dictionary(Of String, String)
                    arraySalesDetail = New Hashtable
                    arraySalesDetail.Add("vchNum", resultSet("vchNum"))
                    arraySalesDetail.Add("ProductName", resultSet("ProductName"))
                    arraySalesDetail.Add("Qty", resultSet("Qty"))
                    arraySalesDetail.Add("Price", resultSet("Price"))
                    arraySalesDetail.Add("Amount", resultSet("Amount"))
                    arraySalesDetail.Add("total", resultSet("total"))
                    listSalesDetail.Add(arraySalesDetail)
                End While
            End If
                resultSet.Close()
                'resultSet = Nothing
            End Using
        End Using
        conn.Close()
        Return listSalesDetail
    End Function

document.load 函数由

$.get('@Url.Content("~")Home/GetSalesDetail', {
    invoiceId: salesHeaderData.invoiceId
  })
  .done(function(salesDetailData) {
    for (var j = 0; j < salesDetailData.length; j++) {
      var input = {};
      console.log("Loop for list details");
      $('input[name="ProductName"]').val(salesDetailData.ProductName);
      $('input[name="Qty"').val(salesDetailData.Qty);
      $('input[name="Price"').val(salesDetailData.Price);
    }
  })

和索引html由

 <table id="detailTable">
 <thead><tr><th>ProductName</th><th>Qty</th><th>Price</th></tr></thead>
   <tbody>
    <tr>
    <td><input name="ProductName"></td>
    <td><input name="Qty"></td>
    <td><input name="Price">
    </tr>
   </tbody>
</table>

这就是我尝试的方式。任何人都可以帮助加载功能不工作吗？

Answer 1

如果可以删除输入，您可以这样做:

    var html = '';      
    $.each(salesDetailData, function (i, item) {

    html += '<tr><td>' + item.ProductName + '</td><td>' + item.Qty + '</td><td>' + item.Price + '</td></tr>';    

   })
  $('tbody').append(html);

您的 html 将如下所示:

    <table id="detailTable">
      <thead><tr><th>ProductName</th><th>Qty</th><th>Price</th></tr></thead>
        <tbody>
        </tbody>
    </table>