Question

我已经在html按钮上单击动态添加表格。添加teamname，teamid，单选按钮。

HTML属性：

<input type="button" value="Generate a table." onclick="generate_table()">

Javascript功能：

function generate_table() 
{
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var teamrecord = "test";
    for (var i = 0; i <  teamrecord.length; i++) {
        var row = document.createElement("tr");

        var cell = document.createElement("td");
        var cell1 = document.createElement("td");
        var cell2 = document.createElement("td");

        var cellText = document.createTextNode("teamrecord");
        var cellId = document.createTextNode("teamid");
        var radio = document.createElement("INPUT");
        radio.setAttribute("type", "radio");
        radio.setAttribute("name", "radio");


        cell.appendChild(cellText);
        cell1.appendChild(cellId);
        cell2.appendChild(radio);

        row.appendChild(cell);
        row.appendChild(cell1);
        row.appendChild(cell2);

        tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl);

}

按钮单击将生成4行3列，现在我需要单击单选按钮上的详细信息。

如果我从第一行选择单选按钮，我需要在警告框中显示teamid？我怎样才能在javascript中实现这一目标？

Answer 1

尝试以下代码应提醒teamid手机innerText

<input type="button" value="Generate a table." onclick="generate_table()">

＆＃13;

 function generate_table() 
        {
            var body = document.getElementsByTagName("body")[0];
            var tbl = document.createElement("table");
            var tblBody = document.createElement("tbody");
            var teamrecord = "test";
            for (var i = 0; i <  teamrecord.length; i++) {
                var row = document.createElement("tr");
        
                var cell = document.createElement("td");
                var cell1 = document.createElement("td");
                var cell2 = document.createElement("td");
        
                var cellText = document.createTextNode("teamrecord");
                var cellId = document.createTextNode("teamid");
                var radio = document.createElement("INPUT");
                radio.setAttribute("type", "radio");
                radio.setAttribute("name", "radio");
        //here we set value of radio button based on element index and we set a classname for teamid cell
                radio.setAttribute("value", i);
                cell1.setAttribute("class", "selected_teamid");
        //here we add click event
                radio.setAttribute("onclick", "getteamid("+i+")");
        
                cell.appendChild(cellText);
                cell1.appendChild(cellId);
                cell2.appendChild(radio);
        
                row.appendChild(cell);
                row.appendChild(cell1);
                row.appendChild(cell2);
        
                tblBody.appendChild(row);
            }
            tbl.appendChild(tblBody);
            body.appendChild(tbl);
        
        }
        function getteamid(i){
        alert(document.getElementsByClassName("selected_teamid")[i].innerText);
        }

＆＃13;

<input type="button" value="Generate a table." onclick="generate_table()">

＆＃13;

Answer 2

在添加无线电元素之前添加此行：

from Tkinter import *

class GUI_Start:

    def __init__(self, master):
        self.master = master
        self.master.geometry('300x300')
        self.master.grid_rowconfigure(0, weight=1)
        self.master.grid_columnconfigure(0, weight=1)
        self.win_colour = '#D2B48C'
        self.frames = {}

        for window in ['win1', 'win2']:
            frame = Frame(self.master, bg=self.win_colour, bd=10, relief=GROOVE)
            frame.grid(row=0, column=0, sticky='news')
            setattr(self, window, frame)
            self.frames[window] = frame

        Page_1(self.frames)

    def Next_Page(self, frames, controller):
        controller(frames)


class Page_1(GUI_Start):

    def __init__(self, master):
        self.master = master
        self.master['win1'].tkraise()

        page1_label = Label(self.master['win1'], text='PAGE 1')
        page1_label.pack(fill=X)

        page1_button = Button(self.master['win1'], text='Visit Page 2...', command=lambda: self.Next_Page(self.master, Page_2))
        page1_button.pack(fill=X, side=BOTTOM)


class Page_2(GUI_Start):

    def __init__(self, master):
        self.master = master
        self.master['win2'].tkraise()

        page2_label = Label(self.master['win2'], text='PAGE 2')
        page2_label.pack(fill=X)

        page2_button = Button(self.master['win2'], text='Back to Page 1...', command=lambda: self.Next_Page(self.master, Page_1))
        page2_button.pack(fill=X, side=BOTTOM)


root = Tk()
gui = GUI_Start(root)
root.mainloop()

Answer 3

git diff apple.с
git diff orange.с

在此函数之后创建anotherFunction（）：

radio.setAttribute("onclick", "anotherFunction(this)")

Answer 4

您只需在创建时为单选按钮添加事件处理程序：

...
radio.addEventListener('click', radioButtonClick, false);
...

function radioButtonClick() {
    alert(this.getAttribute('value'));
}

这要求您将单选按钮的值设置为您的团队ID，或者以其他方式将其存储在单选按钮（事件处理程序中的this）上。

Answer 5

你没有在任何地方传递一个teamid，所以我认为teamid是循环数组的索引。

var generate_table = function()
{
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var teamrecord = "test";
    for (var i = 0; i <  teamrecord.length; i++) {
        var row = document.createElement("tr");

        var cell = document.createElement("td");
        var cell1 = document.createElement("td");
        var cell2 = document.createElement("td");

        var cellText = document.createTextNode("teamrecord");
        var cellId = document.createTextNode("teamid");
        var radio = document.createElement("INPUT");
        radio.setAttribute("type", "radio");
        radio.setAttribute("name", "radio");
        radio.setAttribute('data-team', i); // passing the team id


        cell.appendChild(cellText);
        cell1.appendChild(cellId);
        cell2.appendChild(radio);

        row.appendChild(cell);
        row.appendChild(cell1);
        row.appendChild(cell2);

        tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl);
}

// add an event listener on a dynamic element, and alert the team id
document.addEventListener('click', function(e) {
  if(e.target && e.target.hasAttribute('data-team')) {
    alert(e.target.getAttribute('data-team'));
  }
});

Answer 6

您有几种方法可以实现这一目标：

我认为最简单的方法是添加属性＆＃39; teamid＆＃39;到单选按钮。然后只需监听点击事件并获取此值。

radio.setAttribute('teamid', teamid);
radio.addEventListener('click', onRadioClick);

function onRadioClick(domEvent){
    console.log(domEvent.target.getAttribute('teamid'));
}

对我而言，这不是最佳方式，因为您需要在DOM中添加一些信息......在我看来，最好将表示和数据分开：

var tableData = [
    {teamId: 'someId0', title:'title0', someData:'...' },
    {teamId: 'someId1', title:'title1', someData:'...' },
    {teamId: 'someId2', title:'title2', someData:'...' }
];

for (var i = 0, n = tableData.length ; i < n ; i++){
    var rowData = tableData[i];

    // Create the row using rowData
    // ...

    radio.setAttribute('teamid', rowData.teamId);
    radio.addEventListener('click', onRadioClick.bind(rowData));

    // ...
}

function onRadioClick(domEvent){
    // Here this represent data of the row clicked
    console.log(this.teamId);
}

我认为它更容易管理，因为每个数据都是JS方面......你不会在DOM中存储任何数据......但是两者都有效;）希望它有所帮助

使用javascript获取选定的行值

6 个答案: