javascript 在 textarea 中的 </table> 之前插入测试答案

【问题标题】：javascript insert test before </table> in textareajavascript 在 textarea 中的 </table> 之前插入测试
【发布时间】：2018-05-12 22:24:57
【问题描述】：

我有一个用于将演员和角色输入表格的文本区域，使用 javascript，但必须有按钮来添加 '<table class="xxxx">' 和一个单独的按钮来关闭 </table>，有没有办法修改以下内容在关闭</table> 之前添加新演员作为字符表行的代码，因此无需额外的按钮？

function addtxt(input) {
var obj=document.getElementById(input);
var actortxt = document.getElementById('actor').value;
var chartxt = document.getElementById('character').value;
obj.value+="<tr><td>"+actortxt+"</td><td>as</td><td>"+chartxt+"</td></tr>";
}

【问题讨论】：

此代码项目示例可能会有所帮助：codeproject.com/Articles/14995/…
谢谢，但我没有页面上的表格，源 <table></table> 在 textarea 中以将表格保存到数据库中，这正在工作，但我需要添加 <tr>....</tr>到</table>之前的textarea

标签： javascript forms textarea

【解决方案1】：

<body style="background:grey">

<input type="text" id="actor"/>
<input type="text" id="character"/>

<div id="therefore"></div>

<script>
var i=0;
function addtxt() {
    i++;
    var actortxt = document.getElementById('actor').value;
    var chartxt = document.getElementById('character').value;
    if(i%3==1){
        var open1 = '<table class="xxxx">';
        var close1 = '';
        i=0;
    }else {
        var open1= '';
        var close1 = '</table>';
    }
    document.getElementById('therefore').innerHTML+=open1+"<tr><td>"+actortxt+"</td><td>as</td><td>"+chartxt+"</td></tr>"+close1;

}
document.addEventListener('click',addtxt,false);
</script>

</body>

【讨论】：

【解决方案2】：

创建一个临时的<div> 并将 textarea html 字符串放入其中。

然后像在页面中一样操作 temp <div> 中的表格元素。

完成后，从临时 <div> 的 innerHTML 设置 textarea 值

var editor = document.getElementById('editor')


var tempDiv = document.createElement('div');
tempDiv.innerHTML = editor.value;

var table = tempDiv.querySelector('table'),
  newRow = table.insertRow(),
  cell1 = newRow.insertCell(),
  cell2 = newRow.insertCell();

cell1.textContent = 'Row 2 Cell 1';
cell2.textContent = 'Row 2 Cell 2';

editor.value = tempDiv.innerHTML;

<textarea id='editor' rows="15" cols="200">

<p>Some other element</p>
<table>
 <tr><td> Row 1 Cell 1</td><td>Row 1 Cell 2</tr>
</table>

</textarea>

【讨论】：

我早上去看看，目前这些似乎都不适合我，请在此处查看我的表单link 并查看我要查找的内容，输入底部的演员和角色，然后单击“添加表格开始”，然后单击“添加演员”，然后单击“添加表格结束”，我正在尝试实现此目的而无需添加 <table> </table> 按钮。我认为这就像定位 </table> 并在其前面插入 <tr>....</tr> 行一样简单，但是我该如何在 JS 中做到这一点？
当您可以在 DOM 中而不是在 textarea 中完成时，整个概念似乎是一种非常奇怪的方法。 DOM 是一个非常强大的 html 解析器

【解决方案3】：

没关系，稍微修改一下，我就可以使用这个解决方案了：

    function inserttext(tarea){
        var obj=document.getElementById(tarea);
        var maintext =  document.getElementById(tarea).value;
        var actortxt = document.getElementById('actor').value;
        var chartxt = document.getElementById('character').value;
        var chstr = '<tr><td>'+actortxt+'</td><td>as</td><td>'+chartxt+'</td></tr>';
//      alert('Main:'+maintext+'--'+'Actor:'+actortxt+'--'+'Char:'+chartxt+'--'+chstr);
        var position = maintext.indexOf('</table>');
//      alert('table close found at :'+position);
        var newtext= maintext.substr(0, position) + chstr + maintext.substr(position);
//      alert('New Text:'+newtext);
        obj.value=newtext;
    }

【讨论】：