验证表格列

Question

如何通过javascript或jQuery中的click函数验证HTML表中的特定列？

<table class="table table-bordered table-striped table-responsive" id="tableid">
  <thead>
    <tr>
      <th class="check-col">
        <label>
          <input id="check_all" type="checkbox" name="check"> 
          <span class="label-text table-header-check"></span>
        </label>
      </th>
      <th class="other-col">ID</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr id="td">
      <td class="check-col">
        <label>
			    <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </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 class="check-col">
        <label>
				  <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </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 class="check-col">
        <label>
				  <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td id="table_id" name="id" contenteditable='true' class="other-col">3</td>
      <td id="table_url" name="url" contenteditable='true'>http://google.com/</td>
    </tr>
  </tbody>
</table>

<div class="buttons-section">
  <button type="button" id="valid" class="btn btn-default custom-btn">VALIDATE</button>
</div>

Answer 1

验证URLs的代码，您可以找到比 patt 更好的内容，但这不是最好的。

＆＃13;

＆＃13;

$(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');
      }

    });
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-responsive" id="tableid">
  <thead>
    <tr>
      <th class="check-col">
        <label>
          <input id="check_all" type="checkbox" name="check"> 
          <span class="label-text table-header-check"></span>
        </label>
      </th>
      <th class="other-col">ID</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr class="td">
      <td class="check-col">
        <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td name="id" contenteditable='true' class="other-col table_id">1</td>
      <td class="table_url" name="url" contenteditable='true'>https://fb.com</td>
    </tr>
    <tr class="td">
      <td class="check-col">
        <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td name="id" contenteditable='true' class="other-col table_id">2</td>
      <td class="table_url" name="url" contenteditable='true'>http://twitter.com/</td>
    </tr>
    <tr class="td">
      <td class="check-col">
        <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td name="id" contenteditable='true' class="other-col table_id">3</td>
      <td class="table_url" name="url" contenteditable='true'>http://google.com/</td>
    </tr>
    <tr>
      <td class="check-col">
        <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td name="id" contenteditable='true' class="other-col table_id">3</td>
      <td class="table_url" name="url" contenteditable='true'>htt://google.com/</td>
    </tr>
  </tbody>
</table>

<div class="buttons-section">
  <button type="button" id="valid" class="btn btn-default custom-btn">VALIDATE</button>

＆＃13;

＆＃13;

＆＃13;

<强>更新

＆＃13;

＆＃13;

$(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() {
    // All URLs
    var urls = $('.table_url');
    $.each(urls, function(i, val) {
      // URL text
      var url = $(val).text();
      if (!patt.test(url)) { // Pattern to check if url is valid
        $(val).css('color', 'red');
      } else {
        $(val).css('color', 'green');
      }

    });
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-responsive" id="tableid">
  <thead>
    <tr>
      <th class="check-col">
        <label>
          <input id="check_all" type="checkbox" name="check"> 
          <span class="label-text table-header-check"></span>
        </label>
      </th>
      <th class="other-col">ID</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr class="td">
      <td class="check-col">
        <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td name="id" contenteditable='true' class="other-col table_id">1</td>
      <td class="table_url" name="url" contenteditable='true'>https://fb.com</td>
    </tr>
    <tr class="td">
      <td class="check-col">
        <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td name="id" contenteditable='true' class="other-col table_id">2</td>
      <td class="table_url" name="url" contenteditable='true'>http://twitter.com/</td>
    </tr>
    <tr class="td">
      <td class="check-col">
        <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
      </td>
      <td name="id" contenteditable='true' class="other-col table_id">3</td>
      <td class="table_url" name="url" contenteditable='true'>http://google.com/</td>
    </tr>
    <tr>
    <td class="check-col">
      <label>
          <input class="select_option" type="checkbox" name="check"> 
          <span class="label-text"></span>
        </label>
    </td>
    
    <td name="id" contenteditable='true' class="other-col table_id">3</td>
    <td class="table_url" name="url" contenteditable='true'>htt://google.com/</td>
    </tr>
  </tbody>
</table>

<div class="buttons-section">
  <button type="button" id="valid" class="btn btn-default custom-btn">VALIDATE</button>

＆＃13;

＆＃13;

＆＃13;

附注：id是每页唯一值，如果您需要重复使用某些内容，请改用class。