CODEWITHSUNDEEP
javascripthtmlasp.net
IceeFrog
IceeFrog

Reputation: 317

Fill table form with table cell value

Is there a way to manipulate an HTML Table with Javascript?

I need to rest a value from a <p> when an event triggers the autofill. I'm unable to use more than the <p> value and fill the forms with the USD value from the table automatically or complete the value required to fulfill the required depending on another table column that's called Paid.

I tried using IDs to do this, but it creates a huge mess because I couldn't find a way to use different IDs to use getElementbyId() equal to my other Id. If there's a way please point me towards it. I'm using an ASP.NET MVC environment. I think it might be easier to use local variables to do this although I'm kind of lost in how to manipulate the HTML datatable.

Can someone tell me how to do this?

<!DOCTYPE html>
<html>
<body>



<p>You have payed $7000 USD</p>  <!-- Decrease (1000-2000-1000) -->

<table>
    <thead>
      <th>id</th>
      <th>USD</th>
      <th>Paid</th>
      <th>form</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>$1000</td>
        <td>$0</td>
        <td> <input type="number"</td>  <!-- 1000 here -->
      </tr>
      <tr>
        <td>2</td>
        <td>$2000</td>
        <td>$0</td>
        <td> <input type="number"</td>  <!-- 2000 here -->
      </tr>
      <tr>
        <td>3</td>
        <td>$3000</td>
        <td>$2000</td>
        <td> <input type="number"</td> <!-- 1000 only here -->
      </tr>   
    </tbody>

</table>

<button id="myBtn">Autofill</button>  <!-- On click fill inputs and decrease <p> value -->

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("You have autofilled the table");
});
</script>
</body>
</html>

I expect the output once the button is clicked to perform the comments right next to them, I'm looking up how to do this in ASP.NET and it's just for testing purposes there's no Model or DB data, it's like a DEMO of the real project but I need to know how to do this.

Upvotes: 0

Views: 619

Answers (1)

HBlackorby
HBlackorby

Reputation: 1338

To start, you need to close your text input tags with >. Unclosed like you have them will have them merging with your other tags in weird ways.

You can get groups of tags by things other than just an ID. You can use tags and classes, without modifying your HTML, you can use this in your function:

document.getElementById("myBtn").addEventListener("click", 
function() {
let rows = document.getElementsByTagName("tr");
let i;
let owed = 0;
for (i = 1; i < rows.length; i++) {
    let amount = rows[i].children[1].innerHTML.replace("$","") * 1;
    owed += amount;
    let paid = rows[i].children[2].innerHTML.replace("$","") * 1;
    let formField = rows[i].children[3].children[0];
    formField.value = (amount - paid);
    owed -= paid;
}
document.getElementsByTagName("p")[0].innerHTML = "You have payed $" + owed + " USD";

});

I post that only to show how it could be done without modifying your HTML. I would instead add a class to your table or to each of your rows and use document.getElementsByClassName at the very least, to avoid pulling in other random TR tags on your page. This code assumes that you don't have any other TRs on your page (not a good assumption) and that the table layout never changes.

Upvotes: 1

Related Questions