计算表中的点击值

问题描述 投票：1回答：6

我正在尝试创建一个表，当您单击它时，单击的行变为绿色并且表中的值将被计算，现在它只计算单击的行数但我想将其更改为是在价值之下。

$(function() {
  var countEl = $("#count");
  var countE2 = $("#Value")
  var count = 0;

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    if ($(this).hasClass("green-cell")) {
      count++;
    } else {
      count--;
    }
    countEl.html(count);
  });
});
.green-cell {
  background: rgb(29, 247, 0);
}

table {
  border-collapse: collapse;
}

td,
th {
  border: solid 1px #cccccc;
}

td,
th {
  padding: 5px;
}

tbody tr {
  cursor: pointer;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>


  <div class="container">
    Count: <span id="count"> 0</span>
    <br/><br/>
    <table class="table " id="onclick">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Count</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>3</td>
        </tr>
        <tr>
          <td>henk</td>
          <td>janssen</td>
          <td>4</td>
        </tr>
        <tr>
          <td>piet</td>
          <td>Paulisma</td>
          <td>5</td>
        </tr>
        <tr>
          <td>Theo</td>
          <td>van gogh</td>
          <td>6</td>
        </tr>
        <tr>
          <td>Erik</td>
          <td>Doerustig</td>
          <td>7</td>
        </tr>
        <tr>
          <td>Jan</td>
          <td>de steen</td>
          <td>8</td>
        </tr>



      </tbody>
    </table>








  </div>

</body>
html javascript jquery
6个回答
0
投票
  • 使用.eq( -1 )获取行的最后一个TD元素
  • 得到它的.text()并使用parseInt将字符串转换为整数：

$(function() {
  var countEl = $("#count");
  var countE2 = $("#Value")
  var count = 0;

  $('tbody tr').click(function() {
  
    var $td = $(this).find("td").eq( -1 );    // Get desired row's cell
    var tdVal = parseInt( $td.text(), 10);    // Convert content string to integer
    
    $(this).toggleClass("green-cell");
    
    
    if ($(this).hasClass("green-cell")) {
      count+= tdVal;
    } else {
      count-= tdVal;
    }
    countEl.html(count);
  });
});
.green-cell {
  background: rgb(29, 247, 0);
}

table {
  border-collapse: collapse;
}

td,
th {
  border: solid 1px #cccccc;
}

td,
th {
  padding: 5px;
}

tbody tr {
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  Count: <span id="count"> 0</span>
  <br/><br/>
  <table class="table " id="onclick">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Count</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>2</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>3</td>
      </tr>
      <tr>
        <td>henk</td>
        <td>janssen</td>
        <td>4</td>
      </tr>
      <tr>
        <td>piet</td>
        <td>Paulisma</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Theo</td>
        <td>van gogh</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Erik</td>
        <td>Doerustig</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Jan</td>
        <td>de steen</td>
        <td>8</td>
      </tr>

    </tbody>
  </table>
0
投票

如果我理解你正在尝试做什么，这是添加count列中找到的值，当你单击一行时，你可以做这样的事情：

  var countEl = $("#count");
  var countE2 = $("#Value")
  var count = 0;

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    if ($(this).hasClass("green-cell")) {
      count += parseInt($(this).find('td:last-of-type()').text());
    } else {
      count -= parseInt($(this).find('td:last-of-type()').text());
    }
    countEl.html(count);
  });
0
投票

只需改变这个：

$('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    if ($(this).hasClass("green-cell")) {
      count++;
    } else {
      count--;
    }
    countEl.html(count);
 });

对此：

$('tbody tr').click(function() {
  $(this).toggleClass("green-cell");
  var value = parseInt($(this).children("td:last").html());
  if ($(this).hasClass("green-cell")) {
    count +=value;
  } else {
    count -=value;
  }
  countEl.html(count);
});

我们抓住最后一个TD，一个带有值的TD，并用parseInt将其转换为INT

0
投票

如果我理解你是正确的，你想要列“Count”的所有值的总和。到现在为止，你只是增加了当地的柜台。相反，您需要获取列Count的值并将其添加到当前值。

所以基本上你需要像这样改变你的Javascript

$(function() {
  var countEl = $("#count");
  var countE2 = $("#Value")
  var count = 0;

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    var curCount = parseInt($(this).find('td:last').text());
    if ($(this).hasClass("green-cell")) {

      count = count + curCount;
    } else {
      count = count - curCount;
    }
    countEl.html(count);
  });
});
0
投票

我的jQuery非常生疏，但你在这里想要做的就是在点击的行中找到你的最后一个表格单元格并加/减，而不是只增加/减少你的计数器。

let amount = Number.parseInt($el.children('td').last().text());

这一行表示金额等于在点击的行的最后一个td中找到的整数。然后你会把它添加到你的计数中，唯一的另一个复杂因素是需要减去单元格是否处于活动状态，通常很好的做法是避免其他条件（帮助删除捕获所有无法解释的效果）所以我编辑了代码来添加在所有情况下，并且在非活动单元格的情况下使数字为负。

$(function() {
  const $countEl = $('#count');
  let count = 0;
  
  $('tbody').on('click', 'tr', function() {
    const $el = $(this);
    let amount = Number.parseInt($el.children('td').last().text());
    $el.toggleClass('green-cell')
    
    if (!$el.hasClass('green-cell')) {
      amount = -amount;
    }
    
    count += amount;
    $countEl.text(count);
  });
});
.green-cell {
  background: rgb(29, 247, 0);
}

table {
  border-collapse: collapse;
}

td,
th {
  border: solid 1px #cccccc;
}

td,
th {
  padding: 5px;
}

tbody tr {
  cursor: pointer;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>


  <div class="container">
    Count: <span id="count"> 0</span>
    <br/><br/>
    <table class="table " id="onclick">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Count</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>2</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>3</td>
        </tr>
        <tr>
          <td>henk</td>
          <td>janssen</td>
          <td>4</td>
        </tr>
        <tr>
          <td>piet</td>
          <td>Paulisma</td>
          <td>5</td>
        </tr>
        <tr>
          <td>Theo</td>
          <td>van gogh</td>
          <td>6</td>
        </tr>
        <tr>
          <td>Erik</td>
          <td>Doerustig</td>
          <td>7</td>
        </tr>
        <tr>
          <td>Jan</td>
          <td>de steen</td>
          <td>8</td>
        </tr>



      </tbody>
    </table>








  </div>

</body>
-1
投票

您可以使用cells元素的<tr>属性从行的最后一个单元格中获取金额。

const amount = +this.cells[this.cells.length - 1].innerText;
if ($(this).hasClass("green-cell")) {
  count += amount
} else {
  count -= amount
}

然后，使用此值进行加/减，而不是递增或递减。

$(function() {
  var countEl = $("#count");
  var countE2 = $("#Value")
  var count = 0;

  $('tbody tr').click(function() {
    $(this).toggleClass("green-cell");
    const amount = +this.cells[this.cells.length - 1].innerText;
    if ($(this).hasClass("green-cell")) {
      count += amount
    } else {
      count -= amount
    }
    countEl.html(count);
  });
});
.green-cell {
  background: rgb(29, 247, 0);
}

table {
  border-collapse: collapse;
}

td, th {
  border: solid 1px #cccccc;
}

td, th {
  padding: 5px;
}

tbody tr {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Count: <span id="count"> 0</span>

<table class="table " id="onclick">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Count</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>1</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>2</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>3</td>
          </tr>
          <tr>
              <td>henk</td>
              <td>janssen</td>
              <td>4</td>
          </tr>
          <tr>
              <td>piet</td>
              <td>Paulisma</td>
              <td>5</td>
          </tr>
          <tr>
              <td>Theo</td>
              <td>van gogh</td>
              <td>6</td>
          </tr>
          <tr>
              <td>Erik</td>
              <td>Doerustig</td>
              <td>7</td>
          </tr>
          <tr>
              <td>Jan</td>
              <td>de steen</td>
              <td>8</td>
          </tr>  



        </tbody>
      </table>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.