Question

我从这里找到了一些能满足我项目需求的出色代码：

http://www.askthecssguy.com/examples/rowlock/example9.html

我修改了代码，以便当用户选择项目然后单击按钮时处理数据（例如，从服务器上的数据库中删除数据）

我无法弄清楚如何禁止再次发生此操作。我试过禁用单选按钮。代码以某种方式重新激活单选按钮。我已将单选按钮设置为null。那也行不通。

我最后的想法是更改第二列中的文本（第一列是单选按钮）作为测试代码是否已被删除的方法，但我根本无法弄清楚如何访问该列并修改文本。

这是上面链接的原始代码：

function lockRow() {
var tables = document.getElementsByTagName("table");
for (var m=0; m<tables.length; m++) {
    if (tables[m].className == "pickme") {
        var tbodies = tables[m].getElementsByTagName("tbody");
        for (var j=0; j<tbodies.length; j++) {
            var rows = tbodies[j].getElementsByTagName("tr");
            for (var i=0; i<rows.length; i++) {
                rows[i].oldClassName = rows[i].className;
                rows[i].onclick = function() {
                    if (this.className.indexOf("selected") != -1) {
                        this.className = this.oldClassName;
                    } else {
                        removeSelectedStateFromOtherRows();
                        addClass(this,"selected");
                    }
                    selectRowRadio(this);
                }
            }
        }
    }
}

我将其归结为：

function testloop() 
{
var tables = document.getElementsByTagName("table");
    for (var m=0; m<tables.length; m++)     {       
    var tbodies = tables[m].getElementsByTagName("tbody");
    for (var j=0; j<tbodies.length; j++) {
        var rows = tbodies[j].getElementsByTagName("td");
        for (var i=0; i<rows.length; i++) {
          r = rows[ i ] ;
                 // r is the radio button. 
                 //How do I access the text in the 2nd column?
        }           
    }
}

}

如果选择了“国内”行，我想将“国内”改为“已删除”。我可以在其他代码中检测到并处理该操作。

这有什么意义吗？我想要实现的目标是否更智能或更简单？我的Javascript能力非常缺乏。谢谢。

<tr>
<td>
    <input
        type="radio"
        name="choice"
        value="walalala" />
</td>
<td>Domestic</td>
<td>Titanic</td>
<td>$600,788,188</td>

Answer 1

根据你真正想做的事情，你有几种选择。

您只需删除相应的行 - 用户无法选择它，其他代码也无法找到它。
当用户将其发送到您的服务器时，您可以将“已删除”类添加到行/输入中。下次用户想要发送任何内容时，请检查当前选定的行是否没有“已删除”类。
与2相同，但使用HTML5 data-xxx属性。

这样的事情应该有效（使用jQuery）：

$('button').click(function(event) {
  var i = $('input:checked');
  if (i.hadClass('removed'))
    event.preventDefault();
  else
    i.addClass('removed');
});

如何更改此Javascript代码中的表格元素？

1 个答案: