如何使用javascript在html表中输入字符串？

每次我搜索代码中指定的“Javascript”一词时，我似乎无法在表中删除该词。我不明白为什么我的输入找不到我的单词，我正在通过ID搜索

此代码可能对您有所帮助

function findWord(str) {
    var tdText=document.getElementById("search").textContent.trim();
    return tdText.search(str);
}

使用Jquery插件在类似Jquery.FilterTable的表中进行筛选和搜索
这里有一些错误。在调试过程中，您会发现的第一个问题是：

Uncaught ReferenceError: str is not defined

这意味着您试图对尚未定义的变量调用strike（）函数。首先需要获取搜索值并将其存储在变量中

您的html的输入为id=“word”，因此我们需要从html中获取它。
执行此操作的命令是：

document.getElementById("word")

我们特别需要他们输入的值，即：

var str = document.getElementById("word").value

现在，如果他们输入“hello”或“javascript”，它将存储在str变量中。问题1已修复！关于第二个问题

var inputVal = document.getElementById( "search" );

记住，当您获取一个元素时，它将返回整个节点，而不是其中存储的值。以前，我们必须使用value命令来获取实际文本，但是如果您在这里尝试，它将不起作用，因为搜索是
元素，而不是输入。我以前从未从
中获取过文本，因此我必须使用调试器工具进行查找。（如果您不熟悉它们，这里有一个关于如何使用的指南。事实证明，对于td来说，您需要的是innerText或innerHTML。查看每种格式中存储的内容，innerHTML是我们想要使用的，因为它只获得整个html，这在以后会很重要（innerText不会获得像
这样的html元素）

我还将您存储此文件的变量的名称从inputVal更改为wordSearch，因为我觉得将其命名为inputVal有点混乱，因为我会假定该名称是用户输入的值，而不是wordSearch文档的值

好的，现在我们有了用户的输入和wordSearch，下一个麻烦的行是：

wordSearch.elements.value = words.indexOf( inputVal.value=result );

我相信您正在尝试查看用户提供的值是否存在于wordSearch中，这将是下一个合乎逻辑的步骤。因此，这里有几件事。首先，您再次引用了尚未定义的变量，在本例中为：wordSearch。根据您上面的评论，您使用wordSearch是从类名。不幸的是，在JavaScript中，您不能直接基于元素的类调用该元素。您需要执行以下操作：

document.getElementsByClassName("wordSearch")

if (locationFound === -1) {
  alert(str + " wasn't found");
} else {
  // strike through code goes here
}

但是，我不推荐这种方法，因为（精明的观察者可能已经从名称中猜到）GetElementsByCassName返回元素列表，而不是特定的元素（因此名称使用的是“元素”而不是“元素”）。这是因为多个元素可以具有相同的类名。这就是为什么我以前使用id而不是类名来查找它。只有单个元素可以具有特定id

其次，我们有以下代码片段：

words.indexOf( inputVal.value=result )

这做了两件事。首先，它将结果变量赋值给inputVal.value，因为您有一个等号。如果要比较它们，您需要两个（==）或三个（==）。它要做的第二件事是检查该值的第一个索引的单词。indexOf返回一个整数，指示找到它的位置，如果找不到，则返回-1。让我们解决这个问题

var locationFound = wordSearch.indexOf(str.toUpperCase());

这将为我们提供在单词搜索中找到所提供搜索值的位置，如果未找到，则为-1。然后您可以执行以下操作：

document.getElementsByClassName("wordSearch")

if (locationFound === -1) {
  alert(str + " wasn't found");
} else {
  // strike through code goes here
}

现在，我们需要对罢工进行编码

var locationEnd = locationFound + str.length;
str = str.strike();
document.getElementById("search").innerHTML = 
        wordSearch.slice(0, locationFound) + 
        str + 
        wordSearch.slice(locationEnd);

好的，这看起来可能有点混乱，但是让我们一次一行地看一遍

var locationEnd = locationFound + str.length;

这是找到搜索值的终点，我们需要一点时间

str = str.strike();

这是我们进行删改的地方，替换了原文

document.getElementById("search").innerHTML = 
        wordSearch.slice(0, locationFound) + 
        str + 
        wordSearch.slice(locationEnd);

这样做的目的是删除文档中的原始单词，并将其替换为经过删除的版本，然后将该值设置为元素的innerHTML，id为search

最终代码：

<table>
    <tr>
        <td class="wordSearch" id="search">

            QMGLUTKVRDIYKSA <br />
            GKMTWRITELNXDYP <br />
            MGETELEMENTBYID <br />  
            TTOLOWERCASEBRD <br />  
            NYRTOUPPERCASEI <br />  
            CJDYOFUNCTIONPN <br />  
            WEMSFZTJZJOMFTV <br />  
            BCBCCXSURWHILEE <br />      
            PPRETURNXATLJOU <br />  
            OIFYGTVFXHAAVIN <br />  
            FZRXADXETWINDOW <br />      
            DWNIZKHIVFXPIDL <br />      
            IFRSTRINGVCQQLP <br />
            DOCUMENTULELSEN <br />  
            JYBOOLEANFAXAJH 

        </td>
    </tr>
    </table>

    <form action="">
        <p>
            <label>Enter the word you've found and press Enter:
            <input type="text" id="word" />
            </label>
            <input type="button" value="Enter" onclick= "findWord();" />
        </p>
    </form>
    <div id="scoreArea"></div>

<script type="text/JavaScript">
    var words = "Javascript";
    function findWord() {
        var str = document.getElementById("word").value.toUpperCase();
        var wordSearch = document.getElementById("search").innerHTML;

        var locationFound = wordSearch.indexOf(str);

        if (locationFound === -1) {
          alert(str + " wasn't found");
        } else {
          var locationEnd = locationFound + str.length;
          str = str.strike();
          document.getElementById("search").innerHTML = 
                  wordSearch.slice(0, locationFound) + 
                  str + 
                  wordSearch.slice(locationEnd);
        }

    }
</script>


QMGLUTKVRDIYKSA

GKMTWRITELNXDYP

MGETELEMENTBYID

TTO小写EBRD

NYRTOUPPERCASEI

cjdyofuncitionpn

WEMSFZTJZJOMFTV

bccxsurwhilee

PPRETURNXATLJOU

OIFYGTVFXHAAVIN

FZRXADXETWINDOW

DWNIZKHIVFXPIDL

IFRStringvCqLp

DOCUMENTULELSEN

JYBOOLEANFAXAJH

输入找到的单词，然后按Enter键：

var words=“Javascript”；
函数findWord（）{
var str=document.getElementById（“word”）.value.toUpperCase（）；
var wordSearch=document.getElementById（“search”）.innerHTML；
var locationFound=wordSearch.indexOf（str）；
如果（locationFound==-1）{
警报（str+“未找到”）；
}否则{
var locationEnd=locationFound+str.length；
str=str.strike（）；
document.getElementById（“搜索”）.innerHTML=
wordSearch.slice（0，locationFound）+
str+
slice（locationEnd）；
}
}
wordSearch
未定义，并且您的代码存在多个语法错误。除了patrick comment之外，您还可以在中使用
search（）
函数JS@AlaaA.F.这个函数是什么？你能给我一些参考吗？@DimitarDimitrov这里是
搜索（）
函数参考：| |这是一个JS库，用于添加搜索功能和一些很酷的stuf