获取元素innerHTML并添加到List

时间：2018-03-27 02:35:35

标签： javascript html events onclick

我有一张桌子和一张清单。我希望用户单击表中的项目，并将单元格中的文本添加到列表中。 

function history_buff(obj){

    var elList = Document.getElementById("user_history");


    //alert("Trying to add item " + obj);
    var element = Document.getElementById(str(obj))
    var text = element.innerText || element.textContent;
    var user_item = element.innerHTML = text;

    alert("Trying to add: "  + user_item)


    var li = document.createElement("li");

    li.innerHTML = user_item.value;

    elList.appendChild(user_item);
}

function welcome(){
    alert("Welcome home!");
}

这是HTML：

    <div class="block" id="one">
        <table id="name_table">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Job</th>
            </tr>
            <tr id="name_1">
                <td><a onclick="history_buff();" href="static\text_files\alex.txt">Alex</a></td>
                <td onclick="welcome();">12</td>
                <td>Analyst</td>
            </tr>
            <tr id="name_2"> 
                <td><a href="static\text_files\bill.txt">Bill</a></td>
                <td>54</td>
                <td>Car Salesman</td>
            </tr>
            <tr id="name_3">
                <td><a id="item_3" href="static\text_files\Rodrigo.txt">Rodrigo</a></td>
                <td>7</td>
                <td id="job_3" onclick="history_buff(this.id)">Merchant</td>
            </tr>
        </table>
    </div>
    <div class="block" id="two">
        <h2>History</h2>
        <ul id="user_history">
            <li>Nothing</li>
            <li>Something</li>
        </ul>
    </div>

我尝试了很多与此相似的方法，但似乎无法得到它。

5 个答案:

答案 0 :(得分：1)

首先，为行提供ID是一个坏习惯，因为表中的记录可以动态生成， 其次，你的代码没有运行的一个可能原因是在定义

时

function history_buff(obj){ ... do something }

但是在调用函数时，您没有将obj作为参数传递 ie <td><a onclick="history_buff();" href="static\text_files\alex.txt">Alex</a></td> 最后， `var element = Document.getElementById（str（obj））， 为什么不尝试

var element = Document.getElementById（${obj}）` 我希望这有帮助

答案 1 :(得分：1)

您的功能有一些错误。这是一个固定的工作版本：

＆＃13;
＆＃13; 
function history_buff(obj) {
  var elList = document.getElementById("user_history");
  //alert("Trying to add item " + obj);
  var element = document.getElementById(obj)
  var text = element.textContent;
  var user_item = text;

  alert("Trying to add: " + user_item);

  var li = document.createElement("li");

  li.innerHTML = user_item;

  elList.appendChild(li);
}

function welcome() {
  alert("Welcome home!");
}
＆＃13; 
<div class="block" id="one">
  <table id="name_table">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
    </tr>
    <tr id="name_1">
      <td><a href="static\text_files\alex.txt">Alex</a></td>
      <td onclick="welcome();">12</td>
      <td id="job_1" onclick="history_buff(this.id)">Analyst</td>
    </tr>
    <tr id="name_2">
      <td><a href="static\text_files\bill.txt">Bill</a></td>
      <td>54</td>
      <td id="job_2" onclick="history_buff(this.id)">Car Salesman</td>
    </tr>
    <tr id="name_3">
      <td><a id="item_3" href="static\text_files\Rodrigo.txt">Rodrigo</a></td>
      <td>7</td>
      <td id="job_3" onclick="history_buff(this.id)">Merchant</td>
    </tr>
  </table>
</div>
<div class="block" id="two">
  <h2>History</h2>
  <ul id="user_history">
    <li>Nothing</li>
    <li>Something</li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

但这不是最好的做事方式。

答案 2 :(得分：1)

  • 使用函数addEventListener绑定事件。
  • 字符串没有名为value的属性，因此，此user_item.value无法正常工作。
  • 在列表中附加新元素li。

此方法使用事件对象中的函数preventDefault来阻止链接的默认行为，这样您就可以看到添加到父元素user_history的元素。

＆＃13;
＆＃13; 
Array.prototype.forEach.call(document.querySelectorAll('td a'), function(a) {
  a.addEventListener('click', history_buff)
});

function history_buff(event) {
  event.preventDefault();
  var elList = document.getElementById("user_history");
  var text = this.innerText || element.textContent;
  var user_item = this.innerHTML = text;

  //console.log("Trying to add: " + user_item)

  var li = document.createElement("li");
  li.innerHTML = user_item;

  elList.appendChild(li);
}

function welcome() {
  alert("Welcome home!");
}
＆＃13; 
<div class="block" id="one">
  <table id="name_table">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
    </tr>
    <tr id="name_1">
      <td><a href="static\text_files\alex.txt">Alex</a></td>
      <td onclick="welcome();">12</td>
      <td>Analyst</td>
    </tr>
    <tr id="name_2">
      <td><a href="static\text_files\bill.txt">Bill</a></td>
      <td>54</td>
      <td>Car Salesman</td>
    </tr>
    <tr id="name_3">
      <td><a id="item_3" href="static\text_files\Rodrigo.txt">Rodrigo</a></td>
      <td>7</td>
      <td id="job_3" onclick="history_buff(this.id)">Merchant</td>
    </tr>
  </table>
</div>
<div class="block" id="two">
  <h2>History</h2>
  <ul id="user_history">
    <li>Nothing</li>
    <li>Something</li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

尝试检查此代码段：

function history_buff(value){
  $("#user_history").append('<li><a href="/user/messages"><span class="tab">'+value+'</span></a></li>');

}

function welcome(){
    alert("Welcome home!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block" id="one">
        <table id="name_table">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Job</th>
            </tr>
            <tr id="name_1">
                <td><span onclick="history_buff('Alex');">Alex</span></td>
                <td onclick="welcome();">12</td>
                <td>Analyst</td>
            </tr>
            <tr id="name_2"> 
                <td><span onclick="history_buff('Bill');">Bill</span></td>
                <td>54</td>
                <td>Car Salesman</td>
            </tr>
            <tr id="name_3">
                <td><a id="item_3" href="static\text_files\Rodrigo.txt">Rodrigo</a></td>
                <td>7</td>
                <td id="job_3" onclick="history_buff(this.id)">Merchant</td>
            </tr>
        </table>
    </div>
    <div class="block" id="two">
        <h2>History</h2>
        <ul id="user_history">
            <li>Nothing</li>
            <li>Something</li>
        </ul>
    </div>

你应该学习有关Javascript和jQuery的理解和基础教程。您应该轻松达到理想的结果。

答案 4 :(得分：1)

function history_buff(obj){
    var elList = document.getElementById("user_history");
    var element = document.getElementById(obj)
    var text = element.innerText || element.textContent;
    var user_item = element.innerHTML = text;

    alert("Trying to add: "  + user_item)


    var li = document.createElement("li");
    li.innerHTML = user_item;

    elList.appendChild(li);
}

请注意您的代码：

  • str（）不是js函数

  • li.innerHtml应该等于user_item而不是user_item.value - 这是未定义的。然后将li附加到ul列表

相关问题
最新问题