преобразовать текст в ссылку внутри для указанного c элемента внутри цикла - PullRequest
Новая
       30

преобразовать текст в ссылку внутри для указанного c элемента внутри цикла

0 голосов
/ 05 августа 2020

Я создал код для преобразования данных json в таблицу html, используя javascript и ajax:

Данные: 

[
["text1", "https://www.amazon.com", "text2", "https://www.ebay.com"],
["text3", "https://www.google.com", "text4", "https://www.yahoo.com"],
...
]

Это код, это работают хорошо, но в результате таблицы td , содержащий ссылки, является текстом (column2 и column4, я хочу поместить текст внутри href, чтобы ячейка стала ссылкой (вместо текста): 

const TabBody = document.querySelector("#tab > tbody") 
function loadData() {
    const request = new XMLHttpRequest();
    request.open("get", "rows.json");
    request.onload = () => {
        try {
            const json = JSON.parse(request.responseText);
            populateTable(json);
            }  catch (e) {
                console.warn("error");
            }   
        };

    request.send();
}
function populateTable(json){

    while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}

    json.forEach((row) => { 
        const tr = document.createElement("tr");

        row.forEach((cell) => {
            const td = document.createElement("td");
            td.textContent = cell;
            tr.appendChild(td);})

        TabBody.appendChild(tr);
    })            
}
document.addEventListener("DOMContentLoaded", () => { loadData();})
<body>
    
    <table id="tab">
        <thead>
            <tr>
                <th>column_1</th>
                <th>column_2_link</th>
                <th>column_3</th>
                <th>column_4_link</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

Поделюсь с вами одним образцом. Здесь, при нажатии кнопки обновления ссылки, он обновит все td, у которых есть ссылка на интерактивный элемент, ie он будет обновлен с помощью тега привязки 

function populateTable(json){

var regex = new RegExp("(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})"); // expression here

    while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}

    json.forEach((row) => { 
        const tr = document.createElement("tr");

        row.forEach((cell) => {
            const td = document.createElement("td");
            
            if(regex.test($(this).text())){
                    td.innerHTML = `<a href="${cell}">Link</a>`;
                }
                else{
                td.textContent = cell;
                }
                            
            tr.appendChild(td);})

        TabBody.appendChild(tr);
    })            
}

Полный пример кода для тестирования 

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  // $('#tbl>tbody').find('td').css("background-color", "yellow");
   
   var regex = new RegExp("(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})"); // expression here


   $('table').find("td").each(function(data) {
   if(regex.test($(this).text())){
   $(this).html(`<a href="${$(this).text()}">Contact</a>`)
   }
       
    
});
    
    
  });
});
</script>
</head>
<body>

<table id="tbl">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>  <tr>
    <td>123123</td>
    <td>https://www.amazon.com</td>
    <td>Mexico</td>
  </tr>
  
   <tr>
    <td>123123</td>
    <td>https://www.amazon.com</td>
    <td>Mexico</td>
  </tr>
  
  </tbody>
</table>


<button>Update Link</button>

</body>
</html>
0 голосов
/ 05 августа 2020

Вместо того, чтобы просто добавлять td, вы можете сгенерировать ссылку внутри, проверив строку с Regular Expresion , если это ваше намерение: 

const td = document.createElement("td");
td.innerHTML = /https:\/\//g.test(cell)
  ? `<a href="${cell}">${cell}</a>`
  : cell;
tr.appendChild(td);

Вы можете создать элемент привязки если innerHTML небезопасен для вас, но это должно помочь вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...