如何使一个函数适用于所有表格行？

时间：2018-04-23 12:29:49

标签： jquery

This is the table and

如果我为每个表的每一行写相同的行，或者还有另一行

，我会写这一行 
var firstDiv = $('#res1 tbody tr:first-child td div:first-child');
var SecondDiv = $('#res1 tbody tr:first-child td div:nth-child(2)');
var ThirdDiv = $('#res1 tbody tr:first-child td div:last-child');
var lastP = $('#res1 tbody tr td:last-child');
var count = lastP.text(0);
var cash = $('#res1 tbody tr:first-child td:last-child:first');
firstDiv.click(function () {
    six = 6;
    cash.text(six + parseInt($('#res1 tbody tr td:last-child:first').text()));
});
SecondDiv.click(function () {
    cash.text(4 + parseInt($('#res1 tbody tr td:last-child:first').text()));
});
ThirdDiv.click(function () {
    cash.text(2 + parseInt($('#res1 tbody tr td:last-child:first').text()));
});

[<style>
.mr { 
  border-collapse: collapse;
  margin: 0 auto;
}
/* Zebra striping */
.mr > th { 
  background: darkcyan; 
  color: white; 
  font-weight: bold; 
}
.mr > td, table.mr > th { 
  padding: 8px; 
  border: 1px solid #ccc; 
  text-align: center; 
}
.mr > tbody > tr > td > div {
    width: 100%;
    display: inline-flex;
}
.mr > tbody > tr > td > div:first-child {
    width: 20px;
    height: 20px;
    background-color: red;
    border: 1px solid black;
    border-radius: 50%
}
.mr tbody > tr > td > div:nth-child(2) {
    width: 20px;
    height: 20px;
    background-color: lightblue;
    border: 1px solid black;
    border-radius: 50%
}
.mr > tbody > tr > td > div:last-child {
    width: 20px;
    height: 20px;
    background-color: limegreen;
    border: 1px solid black;
    border-radius: 50%
}
</style>][1]
<table class="table table-bordered mr" id="res1">
    <thead>
        <tr>
            <th>Number</th>
            <th>Goals</th>
            <th>Attack action</th>
            <th>Defensive action</th>
            <th>Skills</th>
            <th>Fair play</th>
            <th>Infraction</th>
            <th>Total</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
            </td>
            <td>
                <div></div>
                <div></div>
                <div></div>
            </td>
            <td>
                <p id=""></p>
            </td>
        </tr>

    </tbody>                                                        
</table>
我有3个像这样的表有一种方法可以使它像函数一样而不是为每一行写入。 注意：它应该添加总分（红色）：6分，第二分：4分，第三分：2分

1 个答案:

答案 0 :(得分：1)

我不知道你要实现什么，但是，在每一次点击中，你必须使用this（当前点击的元素）然后搜索td（首先搜索父级，然后转到最后一个td）以便为每一行设定分数。

见下面的代码段

＆＃13;
＆＃13; 
var lastP = $('#res1 tbody tr td:last-child');
var count = lastP.text(0); 

$('#res1 tbody tr td div').on("click",function(e){
  console.log();
  do_calculation(this);
  
});

function do_calculation(element){
  var tdIndex = $(element).parents("td").index();
  var scoreArray = $("#res1 thead").find('th:nth-child('+(tdIndex+1)+')').data("score");
  var score = scoreArray[$(element).index()];
  var $cash = $(element).parents("tr").find("td:last-child");
  $cash.text(score + parseInt($cash.text()));
}
＆＃13; 
mr {
  border-collapse: collapse;
  margin: 0 auto;
}


/* Zebra striping */

.mr>th {
  background: darkcyan;
  color: white;
  font-weight: bold;
}

.mr>td,
table.mr>th {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.mr>tbody>tr>td>div {
  width: 100%;
  display: inline-flex;
}

.mr>tbody>tr>td>div:first-child {
  width: 20px;
  height: 20px;
  background-color: red;
  border: 1px solid black;
  border-radius: 50%
}

.mr tbody>tr>td>div:nth-child(2) {
  width: 20px;
  height: 20px;
  background-color: lightblue;
  border: 1px solid black;
  border-radius: 50%
}

.mr>tbody>tr>td>div:last-child {
  width: 20px;
  height: 20px;
  background-color: limegreen;
  border: 1px solid black;
  border-radius: 50%
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered mr" id="res1">
  <thead>
    <tr>
      <th>Number</th>
      <th data-score="[6,4,2]">Goals</th>
      <th data-score="[3,2,1]">Attack action</th>
      <th data-score="[3,2,1]">Defensive action</th>
      <th data-score="[2,1]">Skills</th>
      <th data-score="[2,1]">Fair play</th>
      <th data-score="[-3,-2,-1]">Infraction</th>
      <th>Total</th>
      <tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
      </td>
      <td>
        <div></div>
        <div></div>
        <div></div>
      </td>
      <td>
        <p id=""></p>
      </td>
    </tr>

  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题