I constructed a table using a loop, and now I am interested in setting up a click event for each individual cell

Question

I constructed a table using a loop, and now I am interested in setting up a click event for each individual cell

for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
    {
        string empCode = ds.Tables[0].Rows[i]["EMP_CODE"].ToString();
        string empName = ds.Tables[0].Rows[i]["EMP_NAME"].ToString();
        string gradeCode = ds.Tables[0].Rows[i]["GRADE_CODE"].ToString();

        tr = new TableRow();

        td = new TableCell();
        td.Text = empCode;
        tr.Cells.Add(td);
        tableButton.BackColor = System.Drawing.Color.Transparent;
        tableButton.Text = empCode;

        td = new TableCell();
        td.Text = empName;
        tr.Cells.Add(td);

        td = new TableCell();
        td.Text = gradeCode;
        tr.Cells.Add(td);

        table1.Rows.Add(tr);

    }

This is the code I am working on.

As I create each cell in the table, I want to add a click event to the cell. What steps should I take to achieve this? Please advise.

javascript c#html css asp.net

Answer 1

Answer №1

If you want to generate dynamic HTML content and insert it into the InnerHtml property of a server-side control, you can follow this example:

<form id="form1" runat="server">
    <div>
        <table id="table1" runat="server">
        </table>
    </div>
</form>

string html = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
    string empCode = ds.Tables[0].Rows[i]["EMP_CODE"].ToString();
    string empName = ds.Tables[0].Rows[i]["EMP_NAME"].ToString();
    string gradeCode = ds.Tables[0].Rows[i]["GRADE_CODE"].ToString();

    html += "<tr>";
    html += "    <td onClick='MyOnclickEvent()'>" + empCode + "</td>";
    html += "    <td onClick='MyOnclickEvent()'>" + empName + "</td>";
    html += "    <td onClick='MyOnclickEvent()'>" + gradeCode + "</td>";
    html += "</tr>";
}
table1.InnerHtml = html;

Answer 2

If you want to generate dynamic HTML content and insert it into the InnerHtml property of a server-side control, you can follow this example:

<form id="form1" runat="server">
    <div>
        <table id="table1" runat="server">
        </table>
    </div>
</form>

string html = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
    string empCode = ds.Tables[0].Rows[i]["EMP_CODE"].ToString();
    string empName = ds.Tables[0].Rows[i]["EMP_NAME"].ToString();
    string gradeCode = ds.Tables[0].Rows[i]["GRADE_CODE"].ToString();

    html += "<tr>";
    html += "    <td onClick='MyOnclickEvent()'>" + empCode + "</td>";
    html += "    <td onClick='MyOnclickEvent()'>" + empName + "</td>";
    html += "    <td onClick='MyOnclickEvent()'>" + gradeCode + "</td>";
    html += "</tr>";
}
table1.InnerHtml = html;

Answer 3

Answer №2

To handle dynamically created content, you can bind a single event listener to the table and adjust the event capturing mechanism to access the cell content.

const table = document.querySelector('table')

table.addEventListener('click', event => {
  if(event.target.tagName === "TD") {
    console.log(event.target.innerText)
  }
}, {capture: true})

<!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>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

Answer 4

To handle dynamically created content, you can bind a single event listener to the table and adjust the event capturing mechanism to access the cell content.

const table = document.querySelector('table')

table.addEventListener('click', event => {
  if(event.target.tagName === "TD") {
    console.log(event.target.innerText)
  }
}, {capture: true})

<!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>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

Answer 5

Answer №3

There are a couple of ways to achieve this.

One way is to add a click event listener to each cell in your table and handle it accordingly.
Another approach is to iterate through your table rows and columns, assigning a click listener to each cell.

   for (var i = 0; i < table1.rows.length; i++) {
          for (var j = 0; j < table1.rows[i].cells.length; j++)
              table1.rows[i].cells[j].onclick = function () {
              alertCellContent(this);
           };
        }
      }
    
 function alertCellContent(cell) {
   alert(cell.innerHTML);
 }

Answer 6

There are a couple of ways to achieve this.

One way is to add a click event listener to each cell in your table and handle it accordingly.
Another approach is to iterate through your table rows and columns, assigning a click listener to each cell.

   for (var i = 0; i < table1.rows.length; i++) {
          for (var j = 0; j < table1.rows[i].cells.length; j++)
              table1.rows[i].cells[j].onclick = function () {
              alertCellContent(this);
           };
        }
      }
    
 function alertCellContent(cell) {
   alert(cell.innerHTML);
 }

I constructed a table using a loop, and now I am interested in setting up a click event for each individual cell

Answer №1

Answer №2

Answer №3

Similar questions

AutoCAD Command Denied: Attempting to use the 'Undo' command from LISP was unsuccessful

Preventing the dropdown options from appearing in Angular when clearing the input field

Pass data to child component in react

Implementing CSS styles on selected elements using jQuery

Arranging icons at the bottom of the post with a text box that changes dynamically

JavaScript error leading to ERR_ABORTED message showing up in the console

Detecting collisions in JavaScript

Using jQuery's append function, you can dynamically generate a dropdown list in PHP code

Is the absence of http(s) in <link ...> causing any issues?

Utilizing Express.js: Passing the req Object to Middleware without the Need for a New Multer Route

What could be causing my jQuery $(this).next().removeAttribute to not function properly?

Using NextJS: Customizing page names for cleaner URLs

Harness the power of ng-click in conjunction with data-ng-href for a

The attempt to make an HTTP request to the Logic app results in an error message stating that "Property selection is not enabled for values of the type 'String'"

Tips for updating multiple documents in a MongoDB database using an array of values

Struggling with extracting and transferring data from a span tag to another field within the same form using selenium and python

The error message "item is not defined in nodejs" indicates that the variable

Performing an Ajax request upon the completion of page loading

Update Panel triggering postback with RadioButton control

stacking order of floated and positioned elements