文章/答案/技术大牛

发布

社区首页 >问答首页 >根据第一列中的值禁用表中的锚链

问根据第一列中的值禁用表中的锚链
EN

Stack Overflow用户

提问于 2020-09-19 04:52:28

回答 4查看 52关注 0票数 0

我想知道如何禁用我的最后一个锚列。如果第一行中的值不是1或7，我可以对input标记执行此操作，但我不知道如何使用最后一行中的锚标记来模拟这一点。

    <!DOCTYPE html>
    <html>
       <head>
          <style>
             table,
             th,
             td {
             border: 1px solid black;
             border-collapse: collapse;
             }
             th,
             td {
             padding: 15px;
             text-align: left;
             }
             #t01 {
             width: 100%;
             background-color: #fff;
             }
          </style>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
       </head>
       <body>
         
          <table class="table table-striped">
             <thead>
                <tr>
                   <th>column1</th>
                   <th>column2</th>
                   <th>column3</th>
                   <th>column4</th>
                   <th>column5</th>
                   <th>column6</th>
                   <th>column7</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td>5</td>
                   <td>
                      test-1
                   </td>
                   <td>
                      test-2
                   </td>
                   <td>
                      test-3
                   </td>
                   <td>
                      test-4
                   </td>
                   <td>
                      test-5
                   </td>
                   <td>
                      <a class="btn btn-primary btn-xs" href="/Doctor/">Doctor</a>
                   </td>
                </tr>
                <tr>
                   <td>7</td>
                   <td>
                      test-1
                   </td>
                   <td>
                      test-2
                   </td>
                   <td>
                      test-3
                   </td>
                   <td>
                      test-4
                   </td>
                   <td>
                      test-5
                   </td>
                   <td>
                      <a class="btn btn-primary btn-xs" href="/Park/">Park</a>
                   </td>
                </tr>
                <tr>
                   <td>1</td>
                   <td>
                      test-1
                   </td>
                   <td>
                      test-2
                   </td>
                   <td>
                      test-3
                   </td>
                   <td>
                      test-4
                   </td>
                   <td>
                      test-5
                   </td>
                   <td>
                      <a class="btn btn-primary btn-xs" href="/Office/">Office</a>
                   </td>
                </tr>
                <tr>
                   <td>1</td>
                   <td>
                      test-1
                   </td>
                   <td>
                      test-2
                   </td>
                   <td>
                      test-3
                   </td>
                   <td>
                      test-4
                   </td>
                   <td>
                      test-5
                   </td>
                   <td>
                      <a class="btn btn-primary btn-xs" href="/Home/">Home</a>
                   </td>
                </tr>
            <tr>
                   <td>6</td>
                   <td>
                      test-1
                   </td>
                   <td>
                      test-2
                   </td>
                   <td>
                      test-3
                   </td>
                   <td>
                      test-4
                   </td>
                   <td>
                      test-5
                   </td>
                   <td>
                        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
                   </td>
                </tr>
             </tbody>
          </table>
          <script>
             // creating an Array of the values that should cause the <input>
             // to be disabled:
             const disableValues = [1, 7];
             
             // here we find all the <input> elements in the td:last-child element
             // within the <tbody>:
             $('tbody td:last-child input')
             
               // and use the prop() method to update the value of the
               // 'disabled' property:
               .prop('disabled', function() {
             
                 // here we navigate from the current <input> to the closest
                 // ancestor <tr> element and from there find the td:first-child
                 // element and retrieve its text:
                 let firstColValue = $(this).closest('tr').find('td:first-child').text();
             
                 // here we return whether Boolean true (if the numeric value of the
                 // text in the first <td> is included in the array of values) or
                 // false (if that value is not in the array of values):
                 
                 return !disableValues.includes(+firstColValue);
             });
          </script>
       </body>
    </html>

css

javascript

html

jquery

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-09-19 05:11:03

我不太清楚你所说的“禁用”锚标签是什么意思，但是如果你想阻止它们在点击时导航到用户，也许你可以试试这个：

$("tr").each(function () {
  const $children = $(this).children();
  const firstColVal = parseInt($children[0].innerText, 10);

  if ([1, 7].includes(firstColVal)) {
    $($children[$children.length - 1]).find('a').removeAttr('href').addClass('disabled');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>test</td>
    <td><a href="//google.com">Google</a></td>
  </tr>
  <tr>
    <td>2</td>
    <td>test</td>
    <td><a href="//google.com">Google</a></td>
  </tr>
  <tr>
    <td>7</td>
    <td>test</td>
    <td><a href="//google.com">Google</a></td>
  </tr>
</table>

票数 1

Stack Overflow用户

发布于 2020-09-19 05:06:27

您可以改用toggleClass来切换一个名为disabled的类。然后为禁用的锚点创建一个事件侦听器，并简单地在事件上执行预防默认，以在您单击它时阻止任何事情发生。在此之后，使用禁用的CSS类来获得您想要的外观。

$('tbody td:last-child a')
               .toggleClass('disabled', function() {
                 let firstColValue = $(this).closest('tr').find('td:first-child').text();
                 return !disableValues.includes(+firstColValue);
             });

$(document).on("click","a.disabled",function(e){e.preventDefault();});


.disabled{color:silver;opacity:0.5;pointer-events:none}

票数 1

Stack Overflow用户

发布于 2020-09-19 05:19:04

document.querySelectorAll('table > tbody > tr').forEach(tr => {
//for each tr

  var num = tr.querySelector('td:first-of-type').innerText;
//get first column text (number)

  if ((num !== "7") === false || (num !== "1") === false) {
// if not 1 or 7

  tr.querySelector('td:last-of-type ').innerHTML = num;
    }
// on last td replace inner HTML with a link text
});

或者只是设置.style.pointerEvents = "none";禁用a href链接，但按钮停留，不是一个好的UX，但做你想做的。

// creating an Array of the values that should cause the <input>
// to be disabled:
const disableValues = [1, 7];

// here we find all the <input> elements in the td:last-child element
// within the <tbody>:
$('tbody td:last-child input')

  // and use the prop() method to update the value of the
  // 'disabled' property:
  .prop('disabled', function() {

    // here we navigate from the current <input> to the closest
    // ancestor <tr> element and from there find the td:first-child
    // element and retrieve its text:
    let firstColValue = $(this).closest('tr').find('td:first-child').text();

    // here we return whether Boolean true (if the numeric value of the
    // text in the first <td> is included in the array of values) or
    // false (if that value is not in the array of values):

    return !disableValues.includes(+firstColValue);
  });


document.querySelectorAll('table > tbody > tr').forEach(tr => {
  var num = tr.querySelector('td:first-of-type').innerText;
  if ((num !== "7") === false || (num !== "1") === false) {
    tr.querySelector('td:last-of-type ').innerHTML = num;
  }
});

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    
    th,
    td {
      padding: 15px;
      text-align: left;
    }
    
    #t01 {
      width: 100%;
      background-color: #fff;
    }
  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>column1</th>
        <th>column2</th>
        <th>column3</th>
        <th>column4</th>
        <th>column5</th>
        <th>column6</th>
        <th>column7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>
          test-1
        </td>
        <td>
          test-2
        </td>
        <td>
          test-3
        </td>
        <td>
          test-4
        </td>
        <td>
          test-5
        </td>
        <td>
          <a class="btn btn-primary btn-xs" href="/Doctor/">Doctor</a>
        </td>
      </tr>
      <tr>
        <td>7</td>
        <td>
          test-1
        </td>
        <td>
          test-2
        </td>
        <td>
          test-3
        </td>
        <td>
          test-4
        </td>
        <td>
          test-5
        </td>
        <td>
          <a class="btn btn-primary btn-xs" href="/Park/">Park</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          test-1
        </td>
        <td>
          test-2
        </td>
        <td>
          test-3
        </td>
        <td>
          test-4
        </td>
        <td>
          test-5
        </td>
        <td>
          <a class="btn btn-primary btn-xs" href="/Office/">Office</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>
          test-1
        </td>
        <td>
          test-2
        </td>
        <td>
          test-3
        </td>
        <td>
          test-4
        </td>
        <td>
          test-5
        </td>
        <td>
          <a class="btn btn-primary btn-xs" href="/Home/">Home</a>
        </td>
      </tr>
    </tbody>
  </table>

</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63962695

复制

相似问题

问根据第一列中的值禁用表中的锚链
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据第一列中的值禁用表中的锚链EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据第一列中的值禁用表中的锚链
EN