I have a problem getting the Checkbox and Company whole values from the HTML table column, below is a sample picture:
Now I just can get the value in the first row only, the alert message shows Checkbox value is: true and Company value is: Alfreds Futterkiste.
May I know how I can get the whole values of Checkbox and Company in the table column like below what I want the expected result, the alert message will show Checkbox value is: true,false,true,false,true,false and Company value is: Alfreds Futterkiste,Centro comercial Moctezuma,Ernst Handel,Island Trading,Laughing Bacchus Winecellars,Magazzini Alimentari Riuniti:
function show_value(){
var checkbox_val = document.getElementById("checkbox_val");
var company_name = document.getElementById("company_name").value;
alert ("Checkbox value is: " + checkbox_val.checked + " and Company value is: " + company_name);
//alert ("Company Name value is: " + company_name);
}https://stackoverflow.com/questions/ask#<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td>
<td><input type="text" id="company_name" name="company_name" value="Alfreds Futterkiste"/></td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td>
<td><input type="text" id="company_name" name="company_name" value="Centro comercial Moctezuma"/></td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td>
<td><input type="text" id="company_name" name="company_name" value="Ernst Handel"/></td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td>
<td><input type="text" id="company_name" name="company_name" value="Island Trading"/></td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/> </td>
<td><input type="text" id="company_name" name="company_name" value="Laughing Bacchus Winecellars"/></td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0" /> </td>
<td><input type="text" id="company_name" name="company_name" value="Magazzini Alimentari Riuniti"/></td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checkbox and company value</button>
</body>
</html>Hope someone can guide me on how to solve it. Thanks.
Aucun commentaire:
Enregistrer un commentaire