如何修改JavaScript代码,在textarea的</table>前插入演员角色行并取消额外按钮
解决方案
完全可以实现!咱们只需要修改addtxt函数的逻辑,让它自动处理表格的首尾标签,不用手动添加。核心思路是:每次添加行时,先检查文本框里是否已经存在表格标签,如果没有就自动补上开头和结尾;如果已经有了,就把新的表格行插入到</table>闭合标签的前面。
修改后的代码如下:
function addtxt(input) { var obj = document.getElementById(input); var actortxt = document.getElementById('actor').value; var chartxt = document.getElementById('character').value; // 定义表格的首尾标签 const tableStart = '<table class="xxxx">'; const tableEnd = '</table>'; // 组装新的表格行 const newRow = `<tr><td>${actortxt}</td><td>as</td><td>${chartxt}</td></tr>`; // 检查当前文本框内容是否包含表格开头标签 if (!obj.value.includes(tableStart)) { // 第一次添加,直接构建完整表格 obj.value = `${tableStart}${newRow}${tableEnd}`; } else { // 已有表格,把新行插入到</table>之前 obj.value = obj.value.replace(tableEnd, `${newRow}${tableEnd}`); } // 可选:清空输入框,方便继续添加 document.getElementById('actor').value = ''; document.getElementById('character').value = ''; }
代码说明:
- 首先定义了固定的表格首尾标签,确保样式类
xxxx能正确应用。 - 用模板字符串(
${})代替了原来的字符串拼接,代码更易读。 - 第一次添加时,直接生成包含首行的完整表格结构;后续添加时,通过替换
</table>的位置,把新行插入到表格末尾、闭合标签之前。 - 最后加了清空输入框的逻辑,提升用户体验(如果不需要可以删掉这两行)。
这样用户就不用再手动点击按钮添加表格标签了,每次输入演员和角色后点击添加,都会自动维护好完整的表格结构~
内容的提问来源于stack exchange,提问作者Zack
相关产品推荐
相关产品推荐

