Javascript 鸭打/猴打

我有一个文本框，输入逗号分隔/分隔的值，我必须确保其中有唯一的条目。使用并将其绑定到文本框的onblur解决了这个问题

输入到文本框中的值将被分解到一个表中。由于这张桌子可能会很长，我发现它工作得非常出色

问题是，鸭子穿孔代码正在破坏表排序器。Tablesorter的样式可以很好地传递，但是表实际上没有排序。但是，当我注释掉鸭子出击代码时，Tablesorter miraculosly是有效的

我的编码技能不足以让我明白这两者为什么相互冲突。任何帮助都将不胜感激

我没有修改Tablesorter代码，也没有向其中添加任何特殊的排序元素……现在只遵循非常基本的示例。这是我修改的Duck-Punching代码，它只包含了文本框的var，我需要有唯一的条目

 function ValidateTextBox1()
{    
(function($){
var arr = document.getElementById("TextBox1").value.split(',');
    var _old = $.unique;

    $.unique = function(arr){

        // do the default behavior only if we got an array of elements
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        } else {
            // reduce the array to contain no dupes via grep/inArray
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);

 }

上述函数位于一个单独的js文件中，该文件通过onblur for TextBox1调用

然后，我有一个按钮，它运行以下命令：

function GenerateTable()
{  

var Entry1 = document.getElementById("TextBox1").value
var Entry2 = document.getElementById("TextBox2").value
var content = "<table id=myTable class=tablesorter ><thead><tr><th>Entry 1 Values</th><th>Entry 2 Value</th></tr></thead><tbody>"
var lines = Entry1.split(","),
i;
for (i = 0; i < lines.length; i++)
    content += "<tr><td>" + (Entry1.split(",")[i]) + "</td><td>" + Entry2 + "</td></tr>";
    content += "</tbody></table>"


$("#here_table").append(content);
$(function(){
  $("#myTable").tablesorter({
      theme: 'default'
 });
});

}

函数GenerateTable（）
{  
var Entry1=document.getElementById（“TextBox1”）.value
var Entry2=document.getElementById（“TextBox2”）.value
var content=“条目1值Sentry 2值”
变量行=Entry1.split（“，”），
我
对于（i=0；i

该函数将生成/追加特定DIV中的表

如果我留下TextBox1的验证代码，表将生成，但不是可排序的（尽管它仍然设法提取主题）

---

如果删除验证代码，表将生成并可排序。

上面的validateText框函数将无法按预期工作。在这种情况下，“鸭子出击”甚至是不必要的

下面是如何修复脚本（）：

HTML

6,1,7,5,3,4,3,2,4

第2列

生成表

脚本（需要jQuery 1.7+）

（函数（$）{
//绑定到按钮
$（函数（）{
$（'button'）。在（'click'，函数（）{
//禁用按钮以防止多次更新
$（this.prop（'disabled'，true）；
可生成（）；
});
});
功能唯一性（arr）{
return$.grep（arr，function（v，k）{
返回$.inArray（v，arr）==k；
});
}
函数generateTable（）{
var i，
$wrap=$（“#此处_表”），
//获取文本框值，删除不需要的
//空格/制表符/回车键&创建数组
val=$（'#textbox1'）.val（）.split（/\s*，\s*/），
//获取Entry1的唯一值
entry1=唯一（val），
entry2=$（'#textbox2'）.val（），
content=“”；
//创建一行
对于（i=0；i

---

我试图添加一些评论，以更清楚地说明每一步都在做什么。请随时询问任何澄清。

您能否分享更多您正在使用的代码。。。我认为上述代码在您的情况下是不必要的。因此，请在演示中分享textarea如何更新表格-@Mottie-为我的问题添加了额外的代码。谢谢你帮我看这个。太棒了！谢谢，非常感谢莫蒂…你是最棒的！工作得很好。我对它做了一点修改，以适应其他的一切，但它把工作做得非常好。谢谢你的帮助。

<textarea id="textbox1">6,1,7,5,3,4,3,2,4</textarea><br>
<textarea id="textbox2">column 2</textarea><br>
<button>Build Table</button>
<div id="here_table"></div>

(function($) {

    // bind to button
    $(function () {
        $('button').on('click', function () {
            // disable button to prevent multiple updates
            $(this).prop('disabled', true);
            generateTable();
        });
    });

    function unique(arr) {
        return $.grep(arr, function (v, k) {
            return $.inArray(v, arr) === k;
        });
    }

    function generateTable() {
        var i,
            $wrap = $('#here_table'),
            // get text box value, remove unwanted
            // spaces/tabs/carriage returns & create an array
            val = $('#textbox1').val().split(/\s*,\s*/),
            // get unique values for Entry1
            entry1 = unique( val ),
            entry2 = $('#textbox2').val(),
            content = "";
        // build tbody rows
        for (i = 0; i < entry1.length; i++) {
            content += "<tr><td>" + (entry1[i] || '?') + "</td><td>" + entry2 + "</td></tr>";
        }
        // update or create table
        if ($wrap.find('table').length) {
            // table exists, just update the data
            $wrap.find('tbody').remove();
            $wrap.find('table')
                .append(content)
                .trigger('update');
        } else {
            // table doesn't exist, build it from scratch
            $wrap
                .html('<table id=myTable class=tablesorter><thead><tr>' +
                    '<th>Entry 1 Values</th>' +
                    '<th>Entry 2 Value</th>' +
                    '</tr></thead><tbody>' + content + '</tbody></table>')
                .find('table')
                .tablesorter({
                    theme: 'blue'
                });
        }
        // enable the button to allow updating the table
        $('button').prop('disabled', false);
    }

})(jQuery);