每個表格行和單元格選擇一個資料屬性-有解無憂

我有以下html表：

<table border="1" cellpadding="5" class="test">
  <tr>
    <td class="talent-cell"><div class="btn7" data-value="0">aaa</div></td>
    <td class="talent-cell"><div class="btn8" data-value="1">bbb</div></td>
     <td class="talent-cell"><div class="btn9" data-value="2">ccc</div></td>
  </tr>
  <tr>
    <td class="talent-cell"><div class="btn7" data-value="0">ddd</div></td>
    <td class="talent-cell"><div class="btn8" data-value="1">eee</div></td>
    <td class="talent-cell"><div class="btn9" data-value="2">fff</div></td>
  </tr>
  <tr>
    <td class="talent-cell"><div class="btn7" data-value="0">ggg</div></td>
    <td class="talent-cell"><div class="btn8" data-value="1">hhh</div></td>
    <td class="talent-cell"><div class="btn9" data-value="2">iii</div></td>
  </tr>
</table>

如果您單擊表格單元格內的“div 屬性”，我需要獲取單擊的 div 屬性的“資料值”。之后，我構建了一個查詢字串以將其與“URLSearchParams”一起使用。到目前為止，這有效。

現在我需要一個條件。應該只允許每個表行和列選擇一個 div 屬性。但我不知道如何在我的代碼中實作這個條件。

這是小提琴和代碼：

var btn7;
var btn8;
var btn9;

$('.btn7').click(function () {
    if ($(this).attr('data-selected') === 'true') {
        $(this).attr('data-selected', 'false');
        $(this).removeClass('selected');

    } else {
        $(this).closest('tr').find('.btn7').not(this)
        .removeClass('selected').attr('data-selected', 'false');
        $(this).attr('data-selected', 'true');
        $(this).addClass('selected');
        params.set('var7', $(this).data("value"));
        window.history.replaceState({}, '', `?${params}`);
    }
});

$('.btn8').click(function () {
    if ($(this).attr('data-selected') === 'true') {
        $(this).attr('data-selected', 'false');
        $(this).removeClass('selected');

    } else {
        $(this).closest('tr').find('.btn8').not(this)
        .removeClass('selected').attr('data-selected', 'false');
        $(this).attr('data-selected', 'true');
        $(this).addClass('selected');
        params.set('var8', $(this).data("value"));
        window.history.replaceState({}, '', `?${params}`);
    }
});

$('.btn9').click(function () {
    if ($(this).attr('data-selected') === 'true') {
        $(this).attr('data-selected', 'false');
        $(this).removeClass('selected');

    } else {
        $(this).closest('tr').find('.btn9').not(this)
        .removeClass('selected').attr('data-selected', 'false');
        $(this).attr('data-selected', 'true');
        $(this).addClass('selected');
        params.set('var9', $(this).data("value"));
        window.history.replaceState({}, '', `?${params}`);
    }
});


const params = new URLSearchParams({
    var7: btn7,
    var8: btn8,
    var9: btn9,
});

uj5u.com熱心網友回復：

主意

data-使用指示其各自行和列的屬性標記每個表格單元格，并維護 2 個陣列，其中包含每個列和行的當前選定元素（如果有）。

執行

以下代碼實作了選擇邏輯。根據包含當前活動選擇的陣列，您可以在向服務器發送請求時訪問所有相關元素并組裝引數。

單個單元格/行選擇的規范意味著通常會有不進行選擇的行和列。

請注意，不處理明確取消選擇單元格的情況。

該代碼不訴諸jquery。

<!DOCTYPE html>
<html>
    <head>
        <title>SO _: 1-in-a-row, 1-in-a-col selection</title>
        <style type="text/css">
            .selected {
              background: #333;
              color: #fff;
            }
        </style>
        <script type="text/javascript">
            let a_colSelection = new Array(3)
              , a_rowSelection = new Array(3)
              ;
            
            document.addEventListener ( 'DOMContentLoaded', () => { 
                Array.from(document.querySelectorAll('div[data-row][data-col]')).forEach ( el => {
                    el.addEventListener ( 'click', eve => {
                        let c = parseInt(eve.target.getAttribute('data-col'))
                          , r = parseInt(eve.target.getAttribute('data-row'))
                          ;
                        
                        if (a_colSelection[c] !== undefined) {
                            document.querySelector(`div[data-col="${a_colSelection[c][1]}"][data-row="${a_colSelection[c][0]}"]`).classList.remove("selected");
                        }
                        if (a_rowSelection[r] !== undefined) {
                            document.querySelector(`div[data-col="${a_rowSelection[r][1]}"][data-row="${a_rowSelection[r][0]}"]`).classList.remove("selected");
                        }
                        a_colSelection[c] = [r, c];
                        a_rowSelection[r] = [r, c];
                        document.querySelector(`div[data-col="${a_colSelection[c][1]}"][data-row="${a_rowSelection[r][0]}"]`).classList.add("selected");
                    }); 
                });
            });
        </script>
    </head>
    <body>
        <table border="1" cellpadding="5" class="test">
          <tr>
            <td class="talent-cell"><div data-value="0" data-col="0" data-row="0">aaa</div></td>
            <td class="talent-cell"><div data-value="1" data-col="1" data-row="0">bbb</div></td>
             <td class="talent-cell"><div data-value="2" data-col="2" data-row="0">ccc</div></td>
          </tr>
          <tr>
            <td class="talent-cell"><div data-value="0" data-col="0" data-row="1">ddd</div></td>
            <td class="talent-cell"><div data-value="1" data-col="1" data-row="1">eee</div></td>
            <td class="talent-cell"><div data-value="2" data-col="2" data-row="1">fff</div></td>
          </tr>
          <tr>
            <td class="talent-cell"><div data-value="0" data-col="0" data-row="2">ggg</div></td>
            <td class="talent-cell"><div data-value="1" data-col="1" data-row="2">hhh</div></td>
            <td class="talent-cell"><div data-value="2" data-col="2" data-row="2">iii</div></td>
          </tr>
        </table>
    </body>
</html>

uj5u.com熱心網友回復：

考慮以下。

小提琴：https ://jsfiddle.net/Twisty/dzng31f5/39/

HTML

<table border="1" cellpadding="5" class="test">
  <tr class="var7">
    <td class="talent-cell">
      <div class="btn" data-value="0">aaa</div>
    </td>
    <td class="talent-cell">
      <div class="btn" data-value="1">bbb</div>
    </td>
    <td class="talent-cell">
      <div class="btn" data-value="2">ccc</div>
    </td>
  </tr>
  <tr class="var8">
    <td class="talent-cell">
      <div class="btn" data-value="0">ddd</div>
    </td>
    <td class="talent-cell">
      <div class="btn" data-value="1">eee</div>
    </td>
    <td class="talent-cell">
      <div class="btn" data-value="2">fff</div>
    </td>
  </tr>
  <tr class="var9">
    <td class="talent-cell">
      <div class="btn" data-value="0">ggg</div>
    </td>
    <td class="talent-cell">
      <div class="btn" data-value="1">hhh</div>
    </td>
    <td class="talent-cell">
      <div class="btn" data-value="2">iii</div>
    </td>
  </tr>
</table>

我調整了 HTML 結構，使得每一行都有一個類，代表將在物件中使用的索引名稱。

jQuery

$(function() {
  function checkCol(colIndex, table) {
    var result = true;
    console.log("Col Index:"   colIndex)
    $("tbody tr", table).each(function(i, el) {
      result = result && !$("td:eq("   colIndex   ") div.btn", el).hasClass("selected");
    });
    return !result;
  }

  function checkRow(target, row) {
    var isInCol = checkCol($(target).parent().index(), $(row).closest("table"));
    if (!isInCol) {
      if ($(".selected", row).length) {
        $(".selected", row).removeClass("selected");
        $(target).addClass("selected");
      } else {
        $(target).addClass("selected");
      }
    }
  }
  
  var selected = {};
  
  $('.btn').click(function(event) {
    var row = $(this).closest("tr");
    checkRow(this, row);
    $(".test tbody tr").each(function(i, el) {
      selected[$(el).attr("class")] = $(".selected", el).length ? $(".selected", el).data("value") : "";
    });
    console.log(selected);
    var params = new URLSearchParams(selected);
    console.log(params.toString());
  });
});

您現在可以selected在 POST 或 GET 呼叫中用作您的資料。

更新

我錯過了每一行和每一列都必須是唯一的。代碼更新為使用函式來檢查這兩個條件。

uj5u.com熱心網友回復：

“現在我需要一個條件。應該只允許每個表格行和列選擇一個div屬性。”

jQuery 的多功能性是通過使用來利用的，因為它可以從許多物件（all in ）this縮小到單個物件（用戶單擊）。所需的行為在稱為“互斥選擇”的單選按鈕組中很常見，使用使其變得簡單。<td><table><td>.not(this)

在 HTML 中，

為每個分配一個公共類<div>（例如'.col'，參見圖 I）
<div>為每個對應于它的值的類分配一個類[data-value]（例如'.c0'，參見圖 I）

圖一
```
<div class='col c0' data-value='0'>
```

我沒有params在 OP 中包含該部分，因為它超出了問題的范圍（請參閱此答案的開頭）。這些值存盤在物件中C并且很容易訪問（例如C.c0）。

順便說一句，我希望邏輯與您的真實代碼不同。例如，.c0第 2 行和.c0第 1 行之間沒有區別。

詳細資訊在下面的示例中注釋

// Declare object to store [data-value]
let C = {};

// Any click on a .col calls the event handler
$('.col').on('click', function() {
  // Flip .selected on this .col
  $(this).toggleClass('selected');
  // If this .col is flipped to be .selected...
  if ($(this).is('.selected')) {
    //... get this .col [data-value] (0, 1, or 2)...
    let idx = $(this).data('value');
    /*
    ... find all .c0, .c1, or .c2 BUT NOT this .col and
    remove .selected from them...
    */
    $('.c'   idx).not(this).removeClass('selected');
    /*
    ... then find the closest <tr>, then find all .col of
    <tr> BUT NOT this .col and remove .selected from them
    */
    $(this).closest('tr').find('.col')
      .not(this).removeClass('selected');
    // set key 'c0', 'c1', or 'c2' of C to this .col [data-value]
    C['c' idx] = $(this).data('value');
  }
  console.log(C);
});

<table border="1" cellpadding="5" class="test">
  <tr>
    <td><div class="col c0" data-value="0">aaa</div></td>
    <td><div class="col c1" data-value="1">bbb</div></td>
    <td><div class="col c2" data-value="2">ccc</div></td>
  </tr>
  <tr>
    <td><div class="col c0" data-value="0">aaa</div></td>
    <td><div class="col c1" data-value="1">bbb</div></td>
    <td><div class="col c2" data-value="2">ccc</div></td>
  </tr>
  <tr>
    <td><div class="col c0" data-value="0">aaa</div></td>
    <td><div class="col c1" data-value="1">bbb</div></td>
    <td><div class="col c2" data-value="2">ccc</div></td>
  </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/495084.html

標籤：javascript jQuery

上一篇：簡化自動建議的設計

下一篇：React單元測驗獲取TypeError：無法讀取未定義的屬性（讀取“組件”）