Как изменить HTML-таблицу на ссылку - PullRequest
Новая
       2

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

0 голосов
/ 29 октября 2019

enter image description here

Я новичок в html.
Я делюсь своим HTML-кодом, который получает Json данные с сервера и отображает их в формате HTML-таблицы.

Можете ли вы изменить мой HTML-код таким образом, чтобы он имел button между Video Link и Video Image, и когда я нажимаю на эту кнопку, он воспроизводит соответствующее видео YouTube с идентификатором видео той же строки. 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {


   var people = [];

   $.getJSON('https://api.myjson.com/bins/hy7g0', function(data) {
       $.each(data.videoLectureListing, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.Id + "</td>" +
           "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" + "<td>" + f.video + "</td>" + "<td>" + f.image + "</td>" +
           "<td>" + f.videoDuration + "</td>" + "<td>" + f.liveStatus + "</td>" + "<td>"+ "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="25">
  <thead>
            <th>ID</th> 
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
			<th>VIDEO LINK</th>
			<th>VIDEO IMAGE</th>
            <th>DURACTION</th>
            <th>LIVE STATUS</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

Я много пробую в интернете, но ничего не могу найти по этому поводу, пожалуйста, отнеситесь к этому серьезно и помогите мне. Спасибо

1 Ответ

0 голосов
/ 29 октября 2019

У меня было время, чтобы убить, поэтому вот одно решение для вашей проблемы: 

        const keys = ['Id', 'videoName', 'date', 'time', 'videoLink', 'image', 'videoDuration', 'liveStatus'];
    var tableBody = document.getElementById('myTableBody');

    fetch('https://api.myjson.com/bins/hy7g0').then(response => {
        return response.json().then(data => {
            buildTable(data.videoLectureListing);
        })
    });

    function buildTable(fullData) {
        if (fullData) {
            return fullData.forEach(videoData => {
                let newRow = buildRow(videoData);
                tableBody.appendChild(newRow)
            })
        }
    }

    function buildRow(videoData) {
        let newRow = document.createElement('tr');
        keys.forEach(key => {
            let domNode = undefined;
            if (key === 'videoLink') {
                domNode = buildAButton(videoData[key]);
            } else if (key === 'image') {
                domNode = buildAImage(videoData[key]);
            } else {
                domNode = videoData[key] ? videoData[key] : ' - ';
            }
            domNode = buildAColumn(domNode);
            newRow.appendChild(domNode);
        });
        return newRow;
    }

    function buildAButton(videoId) {
        let newButton = document.createElement('button');
        newButton.innerHTML = 'Watch';
        newButton.onClick = () => window.location.href = `url/path/${id}`;
        return newButton;
    }

    function buildAColumn(object) {
        let newColumn = document.createElement('td');
        if (typeof object === 'string') {
            newColumn.innerHTML = object;
        } else {
            newColumn.appendChild(object);
        }
        return newColumn;
    }

    function buildAImage(source) {
        let newImage = document.createElement('img');
        newImage.src = source;
        return newImage;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...