来自同一行中的表数据的getElement(getElement from table data in same row)

来自同一行中的表数据的getElement(getElement from table data in same row)

我使用javascript和html5创建了一个网页。 它像一个自由板。

但是有些问题我无法解决。

表在第一行有选择器和按钮，其他表在第一个td有复选框，在第二个td有数字。 如果选中“复选框”，则写入次数将添加到阵列中。 如果单击该按钮，则执行选定的工作。

这就是我的想法。

然后，我如何获得数字？

桌子的行是动态的，所以我不能正确。

这是我的选择器和执行按钮的代码：

<tr class="taskRow"> <td colspan="8" style="padding-bottom:10px;"> <select> <option value="delete">writing delete</option> <option value="articleBan">writing ban</option> <option value="writerBan">writer ban</option> </select> <input type="submit" value="execute"> </td> </tr>

这是我桌子的一行代码。 表由for循环制成

<tr class="articleData"> <td><input type="checkbox" name="selectData" class="tableData" style="display:table; margin:auto;"></td> <td style="text-align:center;" class="tableData"><%=item.num%></td> <td class="contentData" class="tableData"><div><a href="/wRead/<%=page%>/<%=item.num%>"><%=item.content%></a></div></td> <td style="text-align:center;" class="tableData"><%=item.writer%></td> <td style="text-align:center;" class="tableData"><%=item.hit%></td> <td style="text-align:center;" class="tableData"><%=item.regDate%></td> <td style="text-align:center;" class="tableData"><%=item.goodCount%></td> <td style="text-align:center;" class="tableData"><%=item.replyCount%></td> </tr>

我能想到的一件事是我为每一行创建了一个函数，并将其应用于onclick属性。 但这种方式太复杂了，我认为这不对。

请给我一些想法......

I made a web page using javascript and html5. Its like a free-board.

But there are some problems that I can't resolve.

Table has selectors and button at first row and others have check box at first td and number at second td. If Checkbox is checked, the number of writing will be added to array. If I click the button, selected work is executed.

This is what I think.

Then, how I get the numbers?

Rows of table are dynamic so I can't make it properly.

This is code for my selector and execute button:

<tr class="taskRow"> <td colspan="8" style="padding-bottom:10px;"> <select> <option value="delete">writing delete</option> <option value="articleBan">writing ban</option> <option value="writerBan">writer ban</option> </select> <input type="submit" value="execute"> </td> </tr>

And this is code of my table's one row. Table is made by for loop

<tr class="articleData"> <td><input type="checkbox" name="selectData" class="tableData" style="display:table; margin:auto;"></td> <td style="text-align:center;" class="tableData"><%=item.num%></td> <td class="contentData" class="tableData"><div><a href="/wRead/<%=page%>/<%=item.num%>"><%=item.content%></a></div></td> <td style="text-align:center;" class="tableData"><%=item.writer%></td> <td style="text-align:center;" class="tableData"><%=item.hit%></td> <td style="text-align:center;" class="tableData"><%=item.regDate%></td> <td style="text-align:center;" class="tableData"><%=item.goodCount%></td> <td style="text-align:center;" class="tableData"><%=item.replyCount%></td> </tr>

One thing I can think is that I make a function for each row and I apply it to on onclick attribute. But this way is too complicated and I don't think that would be right.

Please give me some idea...

最满意答案

<script> function test(o) { if (o.checked) { // add "num" class to your number td console.log(o.parentNode.parentNode.querySelector(".num").innerHTML); } } </script> <table> <tr class="taskRow"> <td colspan="8" style="padding-bottom:10px;"> <select> <option value="delete">writing delete</option> <option value="articleBan">writing ban</option> <option value="writerBan">writer ban</option> </select> <input type="submit" value="execute"> </td> </tr> <tr class="articleData"> <!--append the index to the name--> <td><input type="checkbox" name="selectData1" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td> <!--add "num" class to your number td--> <td style="text-align:center;" class="tableData num">1</td> <td class="contentData" class="tableData">1a</td> <td style="text-align:center;" class="tableData">1b</td> <td style="text-align:center;" class="tableData">1c</td> <td style="text-align:center;" class="tableData">1d</td> <td style="text-align:center;" class="tableData">1e</td> <td style="text-align:center;" class="tableData">1f</td> </tr> <tr class="articleData"> <td><input type="checkbox" name="selectData2" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td> <td style="text-align:center;" class="tableData num">2</td> <td class="contentData" class="tableData">2a</td> <td style="text-align:center;" class="tableData">2b</td> <td style="text-align:center;" class="tableData">2c</td> <td style="text-align:center;" class="tableData">2d</td> <td style="text-align:center;" class="tableData">2e</td> <td style="text-align:center;" class="tableData">2f</td> </tr> <tr class="articleData"> <td><input type="checkbox" name="selectData3" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td> <td style="text-align:center;" class="tableData num">3</td> <td class="contentData" class="tableData">3a</td> <td style="text-align:center;" class="tableData">3b</td> <td style="text-align:center;" class="tableData">3c</td> <td style="text-align:center;" class="tableData">3d</td> <td style="text-align:center;" class="tableData">3e</td> <td style="text-align:center;" class="tableData">3f</td> </tr> </table> <script> function test(o) { if (o.checked) { // add "num" class to your number td console.log(o.parentNode.parentNode.querySelector(".num").innerHTML); } } </script> <table> <tr class="taskRow"> <td colspan="8" style="padding-bottom:10px;"> <select> <option value="delete">writing delete</option> <option value="articleBan">writing ban</option> <option value="writerBan">writer ban</option> </select> <input type="submit" value="execute"> </td> </tr> <tr class="articleData"> <!--append the index to the name--> <td><input type="checkbox" name="selectData1" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td> <!--add "num" class to your number td--> <td style="text-align:center;" class="tableData num">1</td> <td class="contentData" class="tableData">1a</td> <td style="text-align:center;" class="tableData">1b</td> <td style="text-align:center;" class="tableData">1c</td> <td style="text-align:center;" class="tableData">1d</td> <td style="text-align:center;" class="tableData">1e</td> <td style="text-align:center;" class="tableData">1f</td> </tr> <tr class="articleData"> <td><input type="checkbox" name="selectData2" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td> <td style="text-align:center;" class="tableData num">2</td> <td class="contentData" class="tableData">2a</td> <td style="text-align:center;" class="tableData">2b</td> <td style="text-align:center;" class="tableData">2c</td> <td style="text-align:center;" class="tableData">2d</td> <td style="text-align:center;" class="tableData">2e</td> <td style="text-align:center;" class="tableData">2f</td> </tr> <tr class="articleData"> <td><input type="checkbox" name="selectData3" class="tableData" style="display:table; margin:auto;" onchange="test(this)";></td> <td style="text-align:center;" class="tableData num">3</td> <td class="contentData" class="tableData">3a</td> <td style="text-align:center;" class="tableData">3b</td> <td style="text-align:center;" class="tableData">3c</td> <td style="text-align:center;" class="tableData">3d</td> <td style="text-align:center;" class="tableData">3e</td> <td style="text-align:center;" class="tableData">3f</td> </tr> </table>