Syf AK Ответов: 3

Как выбрать ячейки таблицы динамически создаваемой таблицы с помощью javascript

Привет, извините за мой английский

Я создал динамическую таблицу с помощью c#, теперь я хочу выбрать ячейки таблицы на основе id и чтобы ячейки таблицы меняли цвет при нажатии на них с помощью javascript. Как я могу этого достичь??

Спасибо.

Что я уже пробовал:

Вот мой код позади:
private void CreateDynamicTable()
{

    int rowCnt;
    int cellCnt;
    int rowCtr;
    int cellCtr;

    Table Table1 = new Table();
    Table1.BorderWidth = 3;
    Table1.BorderStyle = BorderStyle.Solid;
    Table1.ID = "myTable";

    rowCnt = int.Parse(txtrow.Text);
    cellCnt = int.Parse(txtcol.Text);

    for (rowCtr = 1; rowCtr <= rowCnt; rowCtr++)
    {
        TableRow tRow = new TableRow();
        Table1.Rows.Add(tRow);
        for (cellCtr = 1; cellCtr <= cellCnt; cellCtr++)
        {
            TableCell tCell = new TableCell();
            tRow.Cells.Add(tCell);
            string prodID = rowCtr + "_" + cellCtr;

            TextBox txtbox = new TextBox();
            txtbox.Text = "Row:" + rowCtr + "  Column:" + " " + cellCtr;
            tCell.Controls.Add(txtbox);

            tRow.Controls.Add(tCell);
        }
        Table1.Rows.Add(tRow);
    }
    form1.Controls.Add(Table1);
}

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="StyleSheet1.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    
    <form id="form1" runat="server">
       <div>
            <table>
                Creating a dyanamic Table
                <tr>
                    <td>Row:     
                        <asp:TextBox ID="txtrow" placeholder="No of Rows Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

                        <br />
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>Coloum:
                        <asp:TextBox ID="txtcol" placeholder="No of Coloums Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

                        <br />
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button1" Text="Create Table" runat="server" CssClass="button1" OnClick="OnClickOfCreateTable" />
                    </td>
                </tr>
            </table>
         </div>
       </body>
    </html>

3 Ответов

Рейтинг:
20

Vincent Maverick Durano

Вы должны быть в состоянии легко сделать это с помощью jQuery. Во - первых, определите css:

.highlight { background-color: green; }


тогда вы можете сделать что-то вроде этого:

$("#myTable tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#myTable tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");
});

Syf AK

Большое спасибо. @Винсент

Рейтинг:
13

Member 10371658

попробуйте следующий код:
HTML и javascript код:

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">

    <title></title>

    <style>
        .highlight {
            background-color: red;
            color: white;
        }
    </style>
    <script>
        function abc(index) {
            var rr = document.getElementsByClassName("highlight");
            for (var i = 0; i < rr.length; i++) {
                rr[i].className = rr[0].className.replace("highlight", "");
            }
            var ss = document.getElementById(index);
            ss.className = "highlight";
        }

    </script>
</head>
<body>

    <form id="form1" runat="server">
        <div>
            <table>
                Creating a dyanamic Table
                <tr>
                    <td>Row:     
                        <asp:TextBox ID="txtrow" placeholder="No of Rows Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

                        <br />
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>Coloum:
                        <asp:TextBox ID="txtcol" placeholder="No of Coloums Here" runat="server" AutoCompleteType="Disabled"></asp:TextBox>

                        <br />
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button1" Text="Create Table" runat="server" CssClass="button1" OnClick="Button1_Click" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>


код за кодом:
protected void Button1_Click(object sender, EventArgs e)
       {
           CreateDynamicTable();
       }

       private void CreateDynamicTable()
       {

           int rowCnt;
           int cellCnt;
           int rowCtr;
           int cellCtr;

           Table Table1 = new Table();
           Table1.BorderWidth = 3;
           Table1.BorderStyle = BorderStyle.Solid;
           Table1.ID = "myTable";

           rowCnt = int.Parse(txtrow.Text);
           cellCnt = int.Parse(txtcol.Text);

           for (rowCtr = 1; rowCtr <= rowCnt; rowCtr++)
           {
               TableRow tRow = new TableRow();
               Table1.Rows.Add(tRow);
               for (cellCtr = 1; cellCtr <= cellCnt; cellCtr++)
               {
                   TableCell tCell = new TableCell();

                   tRow.Cells.Add(tCell);
                   string prodID = rowCtr + "_" + cellCtr;



                   TextBox txtbox = new TextBox();
                   txtbox.Text = "Row:" + rowCtr + "  Column:" + " " + cellCtr;


                   txtbox.Attributes.Add("id", prodID);

                   txtbox.Attributes.Add("onfocus", "abc('" + prodID + "')");
                   tCell.Controls.Add(txtbox);



                   tRow.Controls.Add(tCell);
               }
               Table1.Rows.Add(tRow);
           }
           form1.Controls.Add(Table1);
       }

Syf AK

Чем вы очень довольны.

Рейтинг:
0

Member 10371658

при создании динамической таблицы просто добавьте идентификатор в каждую td(ячейку), добавьте функцию javascript, удалите класс выделения и добавьте класс выделения в текущую ячейку, где вы щелкнете. попробуйте следующий код:


<html>
<head>
<style>
.highlight{
background-color:red;
color:white;
}
</style>
<script>
function abc(index){
var rr=document.getElementsByTagName("td");
for(var i=0; i<rr.length;i++){
rr[i].className=rr[0].className.replace("highlight", "");
}
var ss=document.getElementById(index);
ss.className="highlight";
}
</script>
</head>
<body>
<table >
<tr>
<td onclick="abc(1)" id="1" class="highlight">1</td>
<td onclick="abc(2)" id="2" class="highlight">vivek</td>
</tr>
<tr>
<td onclick="abc(3)" id="3" class="highlight">2</td>
<td onclick="abc(4)" id="4" class="highlight">Chaudhary</td>
</tr>
<tr>
<td onclick="abc(5)" id="5" class="highlight">3</td>
<td onclick="abc(6)" id="6" class="highlight">dk</td>
</tr>
</table>

</body>
</html>

Syf AK

Спасибо за повтор, я генерирую таблицу на основе пользовательских входов, как я могу добавить tds.

Syf AK

Не могли бы вы сказать мне, пожалуйста, как сохранить состояние динамически созданной таблицы через post back, мой пользовательский интерфейс состоит из двух кнопок. При нажатии на вторую кнопку таблица не сохраняет своего состояния. Тот же самый пример выше. @Участник 10371658