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

Question

我从这里找到了一些满足我的项目需求的很棒的代码:

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

我修改了代码，这样当用户选择一个项目然后点击一个按钮时，数据就会被处理(例如，从服务器上的数据库中删除数据)

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

我最后的想法是更改第 2 列(第一个是单选按钮)中的文本，以此作为测试代码是否已被删除的一种方式，但我根本不知道如何访问该列并进行修改文本。

这是来自上面链接的原始代码:

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

根据您真正想做的事情，您有多种选择。

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

像这样的东西应该可以工作(使用 jQuery):

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