单击“验证”按钮，检查表中url列的验证

Question

HTML

<table class="table table-bordered table-striped table-responsive" id="tableid">

  <thead>
    <tr>

      <th class="other-col">ID</th>
      <th>URL</th>

    </tr>
  </thead>
  <!--Table Rows-->
  <tbody id="table-body">
    <tr id="td" <td id="table_id" name="id" contenteditable='true' class="other-col">1</td>

      <td id="table_url" name="url" contenteditable='true'>https://fb.com</td>
    </tr>

    <tr id="td">

      <td id="table_id" name="id" contenteditable='true' class="other-col">2</td>
      <td id="table_url" name="url" contenteditable='true'>http://twitter.com/</td>
    </tr>

    <tr id="td">

      <td id="table_id" name="id" contenteditable='true' class="other-col">3</td>
      <td id="table_url" name="url" contenteditable='true'>htt://google.com/</td>
    </tr>

  </tbody>
  <!--Table Rows-->
</table>

<!--Button Section-->
<div class="buttons-section">
  <!--Button-->
  <button type="button" id="valid" class="btn btn-default custom-btn">VALIDATE</button>
  <!--End Buttons-->
</div>
<!--End Buttons Section-->

的JavaScript

$(document).ready(function() {
    var patt = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i;
    $('button').click(function() {
        var checked = $('input:checked');
        $.each(checked, function(i, val) {
            var td = $(val).parents('tr').find('#table_url');
            var text = td.text();
            if (!patt.test(text)) { // Pattern to check if url is valid 
                $(td).css('color', 'red');
            } else {
                $(td).css('color', 'green');
            }
        });
    });
});