Question

我有一个HTML表格，每行末尾都有一个单选按钮。例如：

<form name="summary_form" method="post" action="">
    <table width="100%" border="1" cellspacing="0" cellpadding="0" align="left">
        <tr>
            <td width="15%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Start Date</font></p></b>

            </td>
            <td width="7%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Seq#</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Position</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Location</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Department</font></p></b>

            </td>
            <td width="15%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Salary/Hourly Rate</font></p></b>

            </td>
            <td height="29" bgcolor="#999999">
                <div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#993300"><b><font color="#FFFFFF">&nbsp;</font> 
                    </b>
                    </font>
                </div>
            </td>
        </tr>
        <tr>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="10">10/24/2008</div>
            </td>
            <td width="7%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">01</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="20">O035 - Security Guard</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="40">040 - Kingston</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">5000 - GUARD WAGES-OPERATIONS</div>
            </td>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="55">10.2000</div>
            </td>
            <td>
                <input type="hidden" name="employeeid_key1" value="5763" />
                <input type="hidden" name="posstartdate_key1" value="2008-10-24 00:00:01.0" />
                <div align="center">
                    <input type="radio" value="1" name="R" />
                </div>
            </td>
        </tr>
        <tr>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="10">10/24/2008</div>
            </td>
            <td width="7%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">00</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="20">O035 - Security Guard</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="40">040 - Kingston</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">5000 - GUARD WAGES-OPERATIONS</div>
            </td>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="55">10.2000</div>
            </td>
            <td>
                <input type="hidden" name="employeeid_key2" value="5763" />
                <input type="hidden" name="posstartdate_key2" value="2008-10-24 00:00:00.0" />
                <div align="center">
                    <input type="radio" value="2" name="R" />
                </div>
            </td>
        </tr>
        <tr>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="10">04/21/1998</div>
            </td>
            <td width="7%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">01</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="20">O035 - Security Guard</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="40">040 - Kingston</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">5000 - GUARD WAGES-OPERATIONS</div>
            </td>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="55">7.6000</div>
            </td>
            <td>
                <input type="hidden" name="employeeid_key1" value="5763" />
                <input type="hidden" name="posstartdate_key1" value="1998-04-21 00:00:00.0" />
                <div align="center">
                    <input type="radio" value="3" name="R" />
                </div>
            </td>
        </tr>
    </table>
    <input type="hidden" name="rows" value="3" />
</form>
<form id="keys_form" name="keys_form" method="post" action="">
    <input type="hidden" name="employeeid_key" value="" />
    <input type="hidden" name="posstartdate_key" value="" />
</form>

要对特定行执行操作，用户首先通过单击该行的单选按钮选择该行;然后执行操作。

要选择当前行，我们使用此javascript函数：

function getCurrentRow() {
    var rows = parseInt(document.summary_form.rows.value);
    var row = 0;
    if (rows > 1) {
        for (i = 0; i < rows; i++) {
            if (document.summary_form.R[i].checked) {
                row = document.summary_form.R[i].value;
                break;
            }
        }
    } else if (rows == 1) {
        if (document.summary_form.R.checked) row = 1;
    }
    return row;
}

我想要的是摆脱单选按钮，而不是在用户点击任何行时捕获事件。同事开发人员认为使用html table无法使用div，onclick使用div div事件，这意味着每行都有自己的INNER JOIN。我想尽可能使用表格。如何在html表中捕获行单击？

Answer 1

我的解决方案是给每tr个id并使用jquery事件来确定点击了哪个tr，即：

$("body").click(function(event){
  target = $(event.target);
  if ( target.parent().is( "td" ) ) {
    var trId = $(target.closest("tr")).attr( "id" );
    alert( trId );
      //do something with trId, a switch statement perhaps?
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="left">
        <tr>
            <td width="15%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Start Date</font></p></b>

            </td>
            <td width="7%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Seq#</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Position</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Location</font></p></b>

            </td>
            <td width="25%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Department</font></p></b>

            </td>
            <td width="15%" height="29" bgcolor="#999999"> <b><p  align="center"><font face="Verdana, Arial, Helvetica, sans-serif"  size="1" color="#FFFFFF" > Salary/Hourly Rate</font></p></b>

            </td>
            <td height="29" bgcolor="#999999">
                <div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#993300"><b><font color="#FFFFFF">&nbsp;</font> 
                    </b>
                    </font>
                </div>
            </td>
        </tr>
        <tr id="td01">
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="10">10/24/2008</div>
            </td>
            <td width="7%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">01</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="20">O035 - Security Guard</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="40">040 - Kingston</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">5000 - GUARD WAGES-OPERATIONS</div>
            </td>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="55">10.2000</div>
            </td>
        </tr>
        <tr id="td02">
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="10">10/24/2008</div>
            </td>
            <td width="7%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">00</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="20">O035 - Security Guard</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="40">040 - Kingston</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">5000 - GUARD WAGES-OPERATIONS</div>
            </td>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="55">10.2000</div>
            </td>
            <td>
                <input type="hidden" name="employeeid_key2" value="5763" />
                <input type="hidden" name="posstartdate_key2" value="2008-10-24 00:00:00.0" />
                <div align="center">
                    <input type="radio" value="2" name="R" />
                </div>
            </td>
        </tr>
        <tr id="td03">
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="10">04/21/1998</div>
            </td>
            <td width="7%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">01</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="20">O035 - Security Guard</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;text-align:left;" tabindex="40">040 - Kingston</div>
            </td>
            <td width="25%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="45">5000 - GUARD WAGES-OPERATIONS</div>
            </td>
            <td width="15%" height="29" style="font-family: Verdana; font-size: 8pt">
                <div align="center" style=" font-family:Verdana;font-size:8pt;" tabindex="55">7.6000</div>
            </td>
            <td>
                <input type="hidden" name="employeeid_key1" value="5763" />
                <input type="hidden" name="posstartdate_key1" value="1998-04-21 00:00:00.0" />
                <div align="center">
                    <input type="radio" value="3" name="R" />
                </div>
            </td>
        </tr>
    </table>
    <input type="hidden" name="rows" value="3" />

Answer 2

使用纯Javascript，您可以尝试以下代码段中显示的内容：

// ** add table row click event 
function row_OnClick(tblId) {
    try {
        var rows = document.getElementById(tblId).rows;
        for (i = 0; i < rows.length; i++) {
            var _row = rows[i];
            _row.onclick = function () {
                return function () {
                    // YOUR CODE HERE
                };
            }(_row);
        }
    }
        catch (err) { }
    }

其中table通过其id（tblId）传递给函数。用法非常简单：例如从页面正文onload事件中调用此函数。实际实现可以在：http://infosoft.biz/bus.aspx中找到（在单击时选择行;同样，双击事件句柄以类似的方式添加到表行，执行特定于应用程序的功能）。该解决方案也可以使用jQuery实现，但它需要额外的jQuery库。

希望这可能会有所帮助。最好的问候，

在html表中捕获行单击

2 个答案: