如何将输入DOM中的文本转换为HTML中的DOM中的链接

Question

我只是创建一个有表格的网站。该表需要从用户那里获取输入。之后，数据需要显示在表内部。

同时，表上有一个单元格，需要通过链接文本输入。用户单击按钮“尝试后”。它应该在单元格内显示一个“更多”按钮。这样，用户可以通过单击按钮来访问外部链接。

这是我的代码：

<tbody>
      <tr>
        <td data-title='Exhibition'>
          Title
        </td>
        <td data-title='By'>
          Name
        </td>
        <td data-title='Exhibition Date'>
          27 Aug 2019
        </td>
        <td data-title='Location'>
          CITY / COUNTRY
        </td>
        <td class='select'>
          <a class='button' href='#'>
            MORE
          </a>
        </td>
      </tr>

      <!-- <tr id="rows" style="display:none;">
        <td data-title='Exhibition'>
          <input type="text" name="Exhibition<? $i ?>" />
        </td>
        <td data-title='By'>
          <input type="text" name="By<? $i ?>" />
        </td>
        <td data-title='Exhibition Date'>
          <input type="text" name="Exhibition Date<? $i ?>" />
        </td>
        <td data-title='Location'>
          <input type="text" name="Location<? $i ?>" />
        </td>
        <td class='select'>
          <a class='button' href='#'>
            Select
          </a>
        </td>

      </tr> -->

      <!-- <input type='text' id='cellOne' />
      <input type='text' id='cellTwo' /> -->


      <tr id="rows" style="display:none;" class="rows">
        <td data-title='Exhibition'>
          <input type="text" name="Exhibition<? $i ?>" id='cell1'/>
        </td>
        <td data-title='By'>
          <input type="text" name="By<? $i ?>" id='cell2'/>
        </td>
        <td data-title='Exhibition Date'>
          <input type="text" name="Exhibition Date<? $i ?>" id='cell3'/>
        </td>
        <td data-title='Location'>
          <input type="text" name="Location<? $i ?>"id='cell4'/>
        </td>
        <td class='select' id='cell5'>
          <!-- <a class='button' href='#'>
            Select
          </a> -->
          <input type="text" name="select<? $i ?>"id='cell5'/>
        </td>

      </tr>

      <button id="submitButton" onclick="myFunction()" style="display:none; float:right;">Try it</button>

    </tbody>
  </table>

这是javascript：

<script>
$("#add_new").click(function () { 

    $('#rows').show();
    $('#submitButton').show();
    $('#add_new').hide();

  });

  function myFunction(){

    $('#add_new').show();
    $('#submitButton').hide();

    var table = document.getElementById("maintable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);

    cell1.innerHTML = document.getElementById('cell1').value;
    cell2.innerHTML = document.getElementById('cell2').value;
    cell3.innerHTML = document.getElementById('cell3').value;
    cell4.innerHTML = document.getElementById('cell4').value;
    cell5.innerHTML = document.getElementById('cell5').value;

    //clear content on last row
    resetAllValues();
    hideRows();
  }

  function resetAllValues() {
    $('.rows').find('input:text').val('');
  }

  function hideRows(){
    $("#rows").hide();
  }
</script>

根据代码，结果是一旦我单击“提交展览”按钮，它就可以很好地添加数据。但是我没有成功将用户的输入作为按钮内的链接进行传递。

我的问题是如何使用户的输入表成为按钮内的链接？