как отобразить все записи в базе данных внутри раздела тела таблицы html

#javascript #jquery #html #sql-server

#javascript #jquery #HTML #sql-сервер

Вопрос:

Вот как данные извлекаются из базы данных

Как мне отобразить данные внутри таблицы в разделе тела HTML-страницы

Это мой код, который я пробовал до сих пор

 <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Sample</title>

<script language="javascript" src="bop/scripts/jquery-3.0.0.min.js"></script>
<script src="cw/scripts/common.2.js"></script>

<script>
$(document).ready(function(e) {
    $("#but_submit").click(function(e) {
        getstandings()
    });
});

function getstandings()
{
    var url = "sample.aspx";
    var data = 
    {
        object:"getstandings",
        action:"hello"
    };

    getItem(url, data, afterGetInformations);
}

function afterGetInformations(data)
{
    console.log(data);

    var res = $.parseJSON(data).Result
    if (res amp;amp; typeof res === "object" amp;amp; res != null)
    {
        status = parseInt(res.RetCode);
        if(status == -1)
        {
            message2("#msg2", res.ErrMsg);
            return;
        }
    }

    var objs = $.parseJSON(data).Item;

    if (objs amp;amp; typeof objs === "object" amp;amp; objs != null)
    {
        var str = "<div>" objs[0].club_name ";" objs[0].mp ";" objs[0].win ";" objs[0].draw ";" objs[0].lose ";" objs[0].gf ";" objs[0].ga ";" objs[0].gd ";" objs[0].pts "</div>";

        $("#but_submit").after(str);
    }
}


</script>
</head>

<body>

<input type="button" value="Submit" id="but_submit"></input>
</body>
</html>

Данные извлекаются из базы данных. Проблема в том, как отобразить это в таблице.

фактический ожидаемый результат

Ответ №1:

Попробуйте это: это создаст таблицу, содержащую все записи, каждая строка которых указывает объект

 if (objs amp;amp; typeof objs === "object" amp;amp; objs != null)
        {
           var tbl='<table id="mytable"><tr> <th>ID</th><th>ClubName</th><th>MP</th><th>Win</th><th>Draw</th><th>Lose</th><th>Gf</th><th>Ga</th><th>Gd</th><th>Pts</th></tr>';

for(var i=0;i<obj.length;i  )
{
  var tb1 ="<tr><td>" objs[0].id "</td>
        <td>" objs[0].club_name "</td>
        <td>" objs[0].mp "</td> 
        <td>" objs[0].win "</td>
        <td>" objs[0].draw "</td>
        <td>" objs[0].lose "</td>
        <td>" objs[0].gf "</td>
        <td>" objs[0].ga "</td>
        <td>" objs[0].gd "</td>
        <td>" objs[0].pts "</td></tr>";

}
$("#but_submit").after(str);
    }

дайте мне знать, если вам нужна какая-либо помощь в этом отношении. Я был бы рад вам помочь. Спасибо

1. здесь отображается ошибка var tbl='<table id="mytable"><tr> <th>ID</th><th>ClubName</th><th>MP</th><th>Win</th><th>Draw</th><th>Lose</th><th>Gf</th><th>Ga</th><th>Gd</th><th>Pts</th></tr>";

2. @ThanesJagarnathan Я изменил ответ. в конце инструкции вместо одинарной кавычки была двойная кавычка.

3. @ThanesJagarnathan дайте мне знать, если вам нужна какая-либо другая помощь в этом отношении. И если вы найдете ответ полезным, пожалуйста, рассмотрите возможность принятия ответа, нажав на галочку (серого цвета) слева от ответа. А также проголосуйте за ответ. Спасибо

Ответ №2:

Попробуйте это ниже:

      if (objs amp;amp; typeof objs === "object" amp;amp; objs != null)
      {
 var str = "
   <table>
        <tr>
        <th>ID</th>
        <th>ClubName</th>
        <th>MP</th>
        <th>Win</th>
        <th>Draw</th>
        <th>Lose</th>
        <th>Gf</th>
        <th>Ga</th>
        <th>Gd</th>
        <th>Pts</th>
        </tr>
       <tr>
         <td>" objs[0].id "</td>
        <td>" objs[0].club_name "</td>
        <td>" objs[0].mp "</td> 
        <td>" objs[0].win "</td>
        <td>" objs[0].draw "</td>
        <td>" objs[0].lose "</td>
        <td>" objs[0].gf "</td>
        <td>" objs[0].ga "</td>
        <td>" objs[0].gd "</td>
        <td>" objs[0].pts "</td>
        </tr>
   </table>";

                $("#but_submit").after(str);
            }