bugfix> javascript > 投稿

<table>
	<thead>
		
	</thead>
	<tbody>
		<tr>
			<th>Sl.No</th>
			<th>Date</th>
			<th>Purpose</th>
			<th>Debit</th>
			<th>Credit</th>
			<th>Balance</th>
		</tr>
		<tr>
			<td>1</td>
			<td>25/05/2018</td>
			<td>received cash</td>
			<td class="payment">0</td>
			<td class="receipt">5000</td>
			<td class="balance">5000</td>			
		</tr>
		<tr>
			<td>2</td>
			<td>26/05/2018</td>
			<td>paid cash</td>
			<td class="payment">200</td>
			<td class="receipt">0</td>
			<td class="balance">4800</td>			
		</tr>
		<tr>
			<td>3</td>
			<td>27/05/2018</td>
			<td>received cash</td>
			<td class="payment">0</td>
			<td class="receipt">1000</td>
			<td class="balance">5800</td>			
		</tr>
		<tr>
			<td>4</td>
			<td>28/05/2018</td>
			<td>paid cash</td>
			<td class="payment">500</td>
			<td class="receipt">0</td>
			<td class="balance">5300</td>			
		</tr>
	</tbody>
</table>

私は現金残高を作成しています(残高は前日の残高にプラスマイナスのデビットがある場合はマイナスです)... jqueryでこれを行うことができませんでしたコーディングとスタックオーバーフローに慣れていない...すみません間違いと誰かが助けてください....

回答 1 件
  • 次のようなことができます:

    注: <th>   <thead> にあるべきです

    var currentBalance = 0;
    $('table tbody tr').each(function() {             //Loop thru each row
      var payment = -$(this).find('.payment').text(); //Get the value of payment and make the value negative number
      var receipt = +$(this).find('.receipt').text(); //Get the value of receipt and make the value positive number
      currentBalance += payment + receipt;           //Just add the values
      $(this).find('.balance').text(currentBalance); //Update .balance
      //Check currentBalance  is less than 0, if it is add the class red
      if (currentBalance < 0) $(this).find('.balance').addClass('red');
    });
    
    
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    tr:nth-child(even) {
      background-color: #dddddd;
    }
    /* For red color */
    .red {
      color : red;
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
      <thead>
        <tr>
          <th>Sl.No</th>
          <th>Date</th>
          <th>Purpose</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>25/05/2018</td>
          <td>received cash</td>
          <td class="payment">0</td>
          <td class="receipt">5000</td>
          <td class="balance"></td>
        </tr>
        <tr>
          <td>2</td>
          <td>26/05/2018</td>
          <td>paid cash</td>
          <td class="payment">200</td>
          <td class="receipt">0</td>
          <td class="balance"></td>
        </tr>
        <tr>
          <td>3</td>
          <td>27/05/2018</td>
          <td>received cash</td>
          <td class="payment">0</td>
          <td class="receipt">1000</td>
          <td class="balance"></td>
        </tr>
        <tr>
          <td>4</td>
          <td>28/05/2018</td>
          <td>paid cash</td>
          <td class="payment">10000</td>
          <td class="receipt">0</td>
          <td class="balance"></td>
        </tr>
      </tbody>
    </table>
    
    

あなたの答え